Select breaks fieldset width (mobile layout)

[grimski]

Hi there,

When I reduce the width of the browser window to 320px (or a bit less), the width of my select elements break the layout. The strange thing is this doesn’t happen when they are just inside a form. Only when there is a fieldset containing the elements within a form.

I am using a jQuery plugin (http://uniformjs.com) to style the select element but I don’t think this is the issue as they work fine as form elements – just not when wrapped in a fieldset.

Here is an example page I created: http://www.moymadethis.com/uniform-selects/index.html

If your using Chrome/Firebug, you will probably need to position the Firebug window vertically to be able to reduce the viewport width enough. But you can see the same elements that work fine in a form, don’t when contained within a fieldset.

Can anyone help me out here? I removed white-space: nowrap; from the .selector span element which seems to help but it loses the truncated “…”. While this may be a solution, surely it was to be something to do with the fieldset? It seems odd that only that would break it?

Thanks in advance,
Steve

[Mawaha]

Could it be the padding you have on your fieldset?

[Mawaha]

Okay, this one is interesting.

The browsers user agent styles set an intrinsic min-width value of min-content (with browser prefixes) on the fieldset element.

The min-content value is described by the spec as:

The narrowest measure a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken.

http://dev.w3.org/csswg/css-sizing/#width-height-keywords

So basically the smallest value it can be before any inline content is forced to overflow the element.

You can test this by shortening the text “Please choose an option…” in your select.

You can easily override this value by setting the min-width value to inherit, initial or some fixed value.

It may be better for your user to make sure that the form functions well at that screen size though, rather than having truncated labels and such.

[Author]

Posts