Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto width for longer options #129

Closed
sfentress opened this issue Mar 5, 2013 · 7 comments
Closed

Auto width for longer options #129

sfentress opened this issue Mar 5, 2013 · 7 comments

Comments

@sfentress
Copy link

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
Copy link
Contributor

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

@ghost ghost assigned gfranko Mar 5, 2013
@gfranko
Copy link
Owner

gfranko commented Mar 5, 2013

@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
Copy link
Author

@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
Copy link
Author

@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
Copy link
Owner

gfranko commented Mar 5, 2013

@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
Copy link
Author

@gfranko That sounds quite excellent!

gfranko added a commit that referenced this issue Mar 18, 2013
… to true, and upgraded the default SelectBoxIt disabled theme
gfranko added a commit that referenced this issue Mar 19, 2013
@gfranko
Copy link
Owner

gfranko commented Mar 20, 2013

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!

@gfranko gfranko closed this as completed Mar 20, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants