Inline CSS for div selectize-dropdown #289
Comments
|
CSS rules don't work for a few reasons:
|
|
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
}); |
|
I totally agree with you @redheadedstep , this would be a great option. |
** With the default theme,
selectize-dropdowndiv contains inline CSS:** Similar issue with the bootstrap 3 theme but different values:
** 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
The text was updated successfully, but these errors were encountered: