Auto width for longer options

[sfentress]

When options are longer than can fit in the 220px box, they get cut off.

I know that width has been brought up in the issue list a number of times, but the answer generally seems to be "set your width explicitly in your css." This doesn't work if we have dynamic content and don't know ahead of time how wide our boxes need to be.

Regular select boxes handle dynamic widths just fine, so it's natural to assume that this would as well.

I have a simple jsFiddle which auto-sets the width and max-widths of the select box to fit the widths required by the contents: http://jsfiddle.net/SamFent/TYpRq/. The text inside that last select can be made arbitrarily long, and the select box expands to fit.

Is there any reason why this pattern can't be the default, or at least an option?

[ronlussier]

The problem occurs when content gets really long. That said, this might be a nice option to add. Perhaps { fitOptionsMaxWidth: int-max-width }?

[gfranko]

@sfentress The real reason dynamic widths are not yet supported with SelectBoxIt, is because I was looking for a CSS only solution for this and could not find one that worked for all SelectBoxIt supported themes.

A possible CSS only solution that works with the default theme is to set the .selectBoxIt element to width:auto; and then set a background on the .downArrowContainer element to the same as the .selectBoxIt element background so that any text that reaches it is hidden. Unfortunately, jQueryUI and jQueryMobile use images with their themes, which makes setting the .downArrowContainer background look funky.

I completely agree with you that using auto widths should be supported. On that note, your jsfiddle example is not a true auto width experience, since when you click an option that is not as long the drop down stays the same width.

If you want to upgrade your jsfiddle demo and submit a pull request, I'm sure a lot of users would be appreciative. If you don't have time/don't want to submit a PR, I or @ronlussier can come up with a JavaScript auto width solution for the next release. Let me know!

[sfentress]

@ronlussier

That's true (although again, it's what traditionally happens with a select, so it may be what folks expect).

I think a fitOptionsMaxWidth would be a perfect solution, and even better if not adding one allowed the box to keep expanding.

[sfentress]

@gfranko I think that it is "true" autowidth in the manner that folks familiar with normal select boxes would expect it. A select box that kept changing width, causing re-flow of the document, would be annoying, I'd think.

I'm not sure at the moment I'd be able to make a nice pull-request with tests and what-not. At the moment I'll have to stick to my hacky after-the-fact solution. However, I can certainly try to look at it later if it seems like it would be a useful option.

Thanks!

[gfranko]

@sfentress Good point about most people expecting a static width. It might be best to create two options (one for dynamic widths and one for static widths). We will take a look at this for the next release and try to get something out by the end of this week. I'll update this ticket and let you know when it is ready to be used!

[sfentress]

@gfranko That sounds quite excellent!

[gfranko]

I just released SelectBoxIt v3.3.0, which adds a new autoWidth option. You will be happy, since this option is set to true by default. If the autoWidth option is set to false, then you can provide an exact width that you would like your select box to be inside of your CSS. Hope this helps!