selectize drop item to get in front always

Question

hello all i am using selectize plugin to create tags to my site everything is good except that the drop down item gets overlapped by my other divs.

i want them to behave like select items which are absolute and always in frnt.

i have tried positioning with absolute and z-index but no help if you could suggest me something about the plugin it would be great.

     <script src="tags/selectize.js"></script>
    <link rel="stylesheet" href="tags/selectize.default.css"/>
 <div class="control-group">
                <select id="<?=$getid_i?>" multiple name="dept[]" class="demo-default" >
                    <option value=""><?=$placehol?></option>
                    <?php if ($tagwhats =='depts'){
                 // something to get ....
                } else if($tagwhats =='skills'){
                 // something here ...
                } ?>
                </select>
            </div>
 <script>
                var eventHandler = function(name) {
                return function() {
                    console.log(name, arguments);
                    $('#log').append('<div><span class="name">' + name + '</span></div>');
                };
            };
            var $select = $('#'+"<?=$getid_i?>").selectize({
                create          : true,
                onChange        : eventHandler('onChange'),
                onItemAdd       : eventHandler('onItemAdd'),
                onItemRemove    : eventHandler('onItemRemove'),
                onOptionAdd     : eventHandler('onOptionAdd'),
                onOptionRemove  : eventHandler('onOptionRemove'),
                onDropdownOpen  : eventHandler('onDropdownOpen'),
                onDropdownClose : eventHandler('onDropdownClose'),
                onFocus         : eventHandler('onFocus'),
                onBlur          : eventHandler('onBlur'),
                onInitialize    : eventHandler('onInitialize'),
                });
                </script>

Valued

what i am doing is just calling this inside a pre created div with 300px width and 40px height i want when the drop down shows it should get over the div and show. right now it shows but it gets hidden as the height of main div is 40px only – Valued

Answer 1

None of the above answers worked for me. I just had to set the dropdownParent property in my configuration.

dropdownParent: 'body'

https://github.com/selectize/selectize.js/blob/master/docs/usage.md

Note - I am using Angular 7.

Hope this helps someone!

Underexposure

This should be the accepted answer and works perfect. – Dripping

Answer 2

In selectize.css you can change the z-index for the dropdown. The following works on my site:

.selectize-dropdown {
  position: absolute;
  z-index: 10000; /* adjust as necessary */
  border: 1px solid #d0d0d0;
  background: #ffffff;
  margin: -1px 0 0 0;
  border-top: 0 none;  
}

Exempt

Sorry but not working for me what i am doing is just calling this inside a pre created div with 300px width and 40px height i want when the drop down shows it should get over the div and show. right now it shows but it gets hidden as the height of main div is 40px only – Valued

This is useless because the z-index property is ignored when the position property has a value of 'absolute'. – Consonant

Answer 3

Forget about the selectize.css classes. What works for me is:
Create another class with the following:

.myNewClass {
   position: absolute !important;
   z-index: 999;
}

And put this class inside your <select> tag.
After this you should realign your element, but the problem might be solved.

Sociability

Answer 4

Bootstrap framework and it's working fine

.selectize-dropdown {
    z-index: 9999!important;
}

Words

Answer 5

If you use bootstrap 3 or bootstrap 2 don't forget to load the css as well. You can find the css files here. Please load your css accordingly.

Consistency

Answer 6

I am using UIKit 3.x and this works for me

.selectize-dropdown-content {
    z-index: 999;
    background: white;
    border: 1px solid #e5e5e5; // this is optional
}

Cyanosis