Allow scrolling for long list of options.

[zachlysobey]

With a large dataset, displaying all the options without scrolling or pagination is a bit overwhelming.

It is not currently possible to allow scrolling with css alone on the current template since the filter and (un)check all controls are in the same ui > li as the options.

When I get a chance I'll submit a PR separating out the option list from these controls, to allow setting scrolling with css.

I'm curious what your thoughts are on adding this option via the directive's attributes (maybe a max-height) or whether it should be up to the user to implement themselves via css.

[amitava82]

I did this with css in my project as far as I can remember. Should be straightforward.

[zachlysobey]

@amitava82 you mean without changes to the default template? Maybe I'm being dense, but I can't see how to do it. Working on a PR at the moment with a fix, but if you have a pure CSS solution, would be excited to see it

[zachlysobey]

Well... what I was trying didn't work, as it would require throwing out bootstraps dropdown-list which I'm not (yet) willing to do.

I've been trying with no luck to get the filter input and (un)select buttons to be "sticky" with variations of position:fixed, but that is not going to work

[zachlysobey]

Well, I got it working in my project, but it feels pretty ugly and I'm a reluctant to merge in right now without a bit more thought.

Pretty much, I created a nested list inside the .dropdown-menu

<li>
    <ul>
        <li ng-repeat="i in items | filter:searchText">

and then duplicated a bunch of bootstrap styles to make it look right:

(from my code using LESS)

.dropdown-menu ul {
    list-style-type: none;
    margin: 0; padding: 0;
    max-height: 200px;
    overflow: scroll;
    & > li > a { // from .dropdown-menu > li > a
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.428571429;
        color: #333;
        white-space: nowrap;
        padding: 3px 10px;
        cursor:pointer;
    }
    & > li > a:hover { // from .dropdown-menu > li > a:hover
        color: #262626;
        text-decoration: none;
        background-color: #f5f5f5;
    }
}

I'm going to leave this issue open for now, and use that in my personal project, and take some time to reflect on whether its an ok approach.

[amitava82]

Since the plugin supports custom template, one should be able to provide own template for unique look. I've updated example with long dropdown and custom template.

[zachlysobey]

This is exactly what I did. I probably should've put that demo together myself, as I already had all the pieces. Thank you for adding it.

Do you think it makes sense to somehow work this into the directive? That is, ship it with multiple templates built in, and an attribute to do the toggle? If not, I think its time to close this issue ;-)

Another reason for my custom template: I use font-awesome icons rather than glyphicons. Not sure if we should, or how we could integrate some flexibility there, but I suppose thats a topic for another conversation.

[amitava82]

I'd leave that to user. But sure if you have some templates then those can be added as an example. With custom template, user has complete flexibility in the look n feel.

[zachlysobey]

OK, I'll consider getting some custom templates up there. At the very least, I'd like to help make the documentation / examples a bit prettier :-) I'll open an issue on that when I'm ready to start thinking about it.