CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
appleman
appleman

Reputation: 150

Expand Items to max text length in Selectric Dropdown Menu

I am trying to create a menu using jQuery and Selectric frameworks and I have run in to a problem that I need some help with. With this menu, I want to have the min width of the dropdown be the max-width of the largest text item in the drop down select.

As it is now, I can have max and min widths preset, but I would like to have min width be the max width of the longest item. Thanks for the help in advanced

Here's the code I am using: http://lcdsantos.github.io/jQuery-Selectric/

Upvotes: 2

Views: 1851

Answers (1)

indextwo
indextwo

Reputation: 5925

Although it's a little bit late, you may want to try the inheritOriginalWidth property:

$('select').selectric({
    inheritOriginalWidth: true
});

This will automatically make your selectric dropdown the same width as your original <select> element, and it won't change responsively when you select a new option.

Obviously if you have padding, margins, dropdown arrow button etc. on your custom selectric box, you'll need to CSS styling accordingly to make sure everything is visible, as inheritOriginalWidth won't account for these things.

Upvotes: 2

Related Questions