Bootstrap-multiselect: fixed search box

[smart--petea]

1. I have a lot of items
2. I setted max height
3. search is enabled
4. when I'm scrolling the items the search box is scrolled too.

Can I fix search box in some way?

[davidstutz]

Currently, I do not have a quick solution. However, I will try some things and add an example to the documentation.

[davidstutz]

Added this to "Known Issues" for now.

[n8thegr8]

Was this ever fixed?

[szegediistvan]

This feature is important for me, furthermore the "select all" line could be in fixed position as well.

[raunaq-itmatrix]

You can add your own class and apply style like below in order to fix the search box.

.fixedHeader-ul
{
overflow-x: scroll;
}
.fixedHeader-ul li
{
}
.fixedHeader-ul li:first-child
{
position: fixed;
background-color: white;
z-index: 10;

}

[davidstutz]

@n8thegr8 no this was never really fixed. Further, the solution given by @raunaq-itmatrix does not work for me.

[szegediistvan]

@raunaq-itmatrix your solution doesn't work for me, any other solution?

[raunaq-itmatrix]

@n8thegr8 @szegediistvan If you can create JSFiddle, I'll look at it and try to help you on that.

[szegediistvan]

@raunaq-itmatrix This is my Codepen:
http://codepen.io/szegediistvan/pen/xwpmzz

Please help me, because i need fixed search box solution.

[raunaq-itmatrix]

@szegediistvan

Add following class to your CSS and you are all set ! You just need take care of padding/margin.
.input-group
{
position:fixed;
z-index:100;
width:337px;
background-color:white;
padding:10px;
}

[raunaq-itmatrix]

@szegediistvan Is above provided solution worked for you?

[szegediistvan]

No. I would like to fixing li.multiselect-item.filter element, when the options were opened.

[amicel]

You could wrap all the options except filter with some div for custom styling. This worked for me: https://jsfiddle.net/101Lucho/2/
Further, you could add that code to onInitialize configuration option.

[richrd]

Hey, I have this problem too! Wishing the filter would stay fixed to the top. I'd assume this would be how most people would like it to work.

What if I make pull request for this feature, would you be open to changing the default behaviour @davidstutz ?

[phuctma]

I have a workaround. We can move the search element li.filter from ul.multiselect-container element and place it next to the button.multiselect then show/hide the the search element rely on Dropwdown events:

$("#selectElement").multiselect({
    enableFiltering: true,
    onDropdownShown: function () {
        $("li.filter").show();
    },
    onDropdownHidden: function () {
        $("li.filter").hide();
    },
    enableCaseInsensitiveFiltering: true
});
$("li.filter").insertAfter("button.multiselect").hide();

[jvcunha]

no have solution?

[aftab-currency]

I have fixed this using css.
.multiselect-filter { position: sticky; top: 5px; z-index: 1; }