Selectize.js: Inline CSS for div selectize-dropdown

Created on 14 Feb 2014 · 3Comments · Source: selectize/selectize.js

** With the default theme, selectize-dropdown div contains inline CSS:

<div class="selectize-dropdown ..." style="width: 520px; top: 36px; left: 0px; ...">

top: 36px;
width: 520px; => should probably be 100%
left: 0px; => does not seem to be needed

** Similar issue with the bootstrap 3 theme but different values:

<div class="selectize-dropdown ..." style="width: 520px; top: 31px; left: 0px; ...">

top: 31px; => a different value this time (otherwise it would look ugly)

** Would be nice to have these CSS rules inside the .css file instead of inline.

~~I could not determine where these inline CSS rules are coming from.~~
This is done inside selectize.js, function positionDropdown

Source

tkrotoff

Most helpful comment

Normally a select element will show the drop down wider than the width of the actual control in order to show the options. (You can see this here: http://cdn.css-tricks.com/wp-content/uploads/2009/01/selectcutofffix.png). Adding a new option to the selectize control to allow it to have an offsetWidth (additional width added to the drop down) would solve this problem and still be usable.

Something like this:

$('#selectize_control').selectize({
     dropdownOffsetWidth: 150, // add 150px to the drop down width
});

Then inside selectize.js, function positionDropDown, you can change the code from:

this.$dropdown.css({
    width:a.outerWidth(),
    top:b.top,
    left:b.left
});

To:

this.$dropdown.css({
   width: this.settings.dropdownOffsetWidth ? (a.outerWidth() + this.settings.dropdownOffsetWidth) : a.outerWidth(),
   top:b.top,
   left:b.left
});

If you wanted to get really particular, you could add a check in place to keep the drop down from extending past the window size (for instance scaling from desktop to mobile using bootstrap 3):

this.$dropdown.css({
   width: this.settings.dropdownOffsetWidth ? ((a.outerWidth() + this.settings.dropdownOffsetWidth) < ($(window).width() - a.offset().left) ? (a.outerWidth() + this.settings.dropdownOffsetWidth) : a.outerWidth()) : a.outerWidth(),
   top:b.top,
   left:b.left
});

redheadedstep on 20 Aug 2014

👍3

All 3 comments

CSS rules don't work for a few reasons:

Often times the dropdown is appended to the <body> (when the "dropdownParent" setting is true). This is used when an ancestor element clips the dropdown menu, and you need to get around that.
If many options are selected, the control can actually grow in height (it won't be constant).

brianreavis on 14 Feb 2014

Something like this:

$('#selectize_control').selectize({
     dropdownOffsetWidth: 150, // add 150px to the drop down width
});

Then inside selectize.js, function positionDropDown, you can change the code from:

this.$dropdown.css({
    width:a.outerWidth(),
    top:b.top,
    left:b.left
});

To:

this.$dropdown.css({
   width: this.settings.dropdownOffsetWidth ? (a.outerWidth() + this.settings.dropdownOffsetWidth) : a.outerWidth(),
   top:b.top,
   left:b.left
});

If you wanted to get really particular, you could add a check in place to keep the drop down from extending past the window size (for instance scaling from desktop to mobile using bootstrap 3):

this.$dropdown.css({
   width: this.settings.dropdownOffsetWidth ? ((a.outerWidth() + this.settings.dropdownOffsetWidth) < ($(window).width() - a.offset().left) ? (a.outerWidth() + this.settings.dropdownOffsetWidth) : a.outerWidth()) : a.outerWidth(),
   top:b.top,
   left:b.left
});

redheadedstep on 20 Aug 2014

👍3

I totally agree with you @redheadedstep , this would be a great option.