Label width in responsive design

[mattmclarty]

I would recommend removing these lines from the code:

           // Set label width
            var labelWidth =
                    control.width()
                  - arrow.outerWidth()
                  - (parseInt(label.css('paddingLeft')) || 0)
                  - (parseInt(label.css('paddingRight')) || 0);

            label.width(labelWidth);

You already have a class of 'selectBox-label' set for the label. This is where sizing should be handled. If you allow for the users to size from the CSS, the label and dropdown can then resize depending on screen size and can be more readily used in responsive designs.

You could set a default size for the label in your css and encourage users to handle their sizing there.

.selectBox-label { max-width:85%;}

Or not set one at all and allow the element to size as needed.

[bloqhead]

I ran into this same issue and commented this part out. Worked well for me. +1 and thanks @mattmclarty.

Also, removing min-width: 150px; from .selectBox-dropdown (or reducing it) in the CSS addressed part of my issue as well. The select menus weren't sizing down well for small screens.

[marcj]

Indeed, I give +1 for removing that part, but have at the moment less time. Maybe a volunteer can post a pull-request.

[mattmclarty]

I submitted the updates I suggested.

I'd also like to say that this component is very handy. Great work, keep it up. :)

[bloqhead]

+1 on @mattmclarty's comment. This is probably the easiest plugin I've worked with in regards to this. The alternative was Bootstrap Select which is nice, but the Bootstrap CSS can be very overbearing.