Remove forced widths in order to get responsive dropdown menus #2091
Conversation
Now chosen is fully responsive. The input width comes from their parent's width. Cleaned up index files removing the old width behavior + styling a little bit all that.
|
needed! |
| @@ -44,7 +44,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default; | |||
| display: block; | |||
| overflow: hidden; | |||
| padding: 0 0 0 8px; | |||
| height: 25px; | |||
| // height: 25px; | |||
There was a problem hiding this comment.
I've commented it for testing purposes and I forgot to uncomment it. Removed on commit 626dd51
|
+1 Would love to see this merged. |
|
Just tested this PR on a project and it works great. Thanks. |
|
Would love to see this merged, it allows us to use our own width where necessary. Works great applied manually. |
|
I would love it too... 馃槄 |
|
Would love to see this merged. Style should not be determined via the js or html. At least set no width style by default if width is not provided as an option. |
|
Chosen specifically tries to match the width of the select it's replacing. The reason for this is to match the behavior browsers exhibit when sizing selects (which is to make the select the appropriate width for the content). In most cases, we've preferred to keep Chosen's behavior in line with what the browser will do and width is not going to be an exception. Browsers offer you a way to work around the default behavior by using css ... and so does Chosen! You can also specify a width for Chosen to use. If you'd like Chosen to be 100%, you just need to specify a width of 100%: $("select").chosen({ width: '100%' });Thanks, @elboletaire Edit: Updated example to have quotes |
|
The above example is missing quotes: $("select").chosen({ width: '100%' }); |
|
Well, that's not the answer I was looking for ... and I'm sure it's neither the solution for the people who commented this PR. I'll do my own fork then. Thanks for your help :) |
|
@pfiller It's my understanding that Chosen sets widths inline. Is that correct? If so, setting the width with css would require the !important hack which isn't a good practice. |
|
To add: It's rare I would want to universally set the width of select boxes to 100%. Most of the time I would use media queries in css to make select boxes on mobile devices 100%, which would get tricky fast having to use !important. |
|
So @pfiller if chosen is trying to match the width of the select element, and width is not specitied in the options object, does that mean I can set width styles on the select with css and chosen will (on pageload) use that width? |
You can set the width of the select in CSS and Chosen will try to match!
Yes, as long as the width is in px. If you need a percentage width, you need to specify it in the options object. |
As the title suggests, I've removed the forced widths used when creating chosen objects. Now the width of the select menus depends on their wrapper.
I've uploaded it to
gh-pagesso you can see it working: http://elboletaire.github.io/chosen/Obviously, resize the window to see it in action 馃槂