Expanding Drop-down

I have some drop-down menus in a really tight space, and when the user selects a value, the drop-down is expanding slightly.

So far this does not break anything, but the subtle shift is annoying!

Any ideas how to fix this?

Here is a code snippet…


<select id="commentAgree" name="commentAgree">
<option value="">--</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>


.userPost form.commentSurvey select {
    margin: 0 5px 0 0;
}

.userPost form.commentSurvey option {
    margin: 0 -5px 0 0;
    padding: 0;
}

I suppose what I want is a fixed-width drop-down that looks the same whether a person chooses “Iowa” or “Pennsylvania”…

Sincerely,

Debbie

What you could try is set a fixed width for the SELECT tag, then when any OPTION is selected it won’t expand/contact widthwise.

How would I do that?

Better yet, is there a way to say, “CSS, make my select as wide as the widest option and leave it fixed that way!”

Sincerely,

Debbie

What browser is this appearing in? I took your code and created this

<!doctype html><html>
<head>
<title>Brynarth template</title>
<style>


select {
    margin: 0 5px 0 0;
}
 
option {
    margin: 0 -5px 0 0;
    padding: 0;
}
</style>
</head>
<body>


<select id="commentAgree" name="commentAgree">
<option value="">--</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>


</body>
</html>

And no shift occurs on my end.

FireFox 31

When I try your code and select “Yes”, the box gets a little wider, so it is the same issue I was having…

Sincerely,

Debbie

AFAIK there is no pure CSS fix to this, but I might be wrong. You could always make the default option text a bit bigger as to not force a resize. Or give the <select> a fixed width.

Hi,

Remove the styles for the option as that is confusing Firefox.


.userPost form.commentSurvey option {
    margin: 0 -5px 0 0;
    padding: 0;
}

There is no need to apply styles to the option element anyway (apart from colours) as most browsers ignore them. The issue you were having was not evident in Chrome but was happening in Firefox. Remove the option styles and the menu will not jump.

The reason I added this style is because the width of my dropdown boxes seems to be disproportionately wide for the option data.

If I could find a way to get rid of any apparent padding around the option data, and make the select boxes shrink to fit the actual width of the widest option choice, then I wouldn’t need to do what I did above.

Here is a screenshot…

(The above screenshot may not seem overly wide, but I have hardly any space in my Comment Header, so every pixel matters!!)

Does that makes sense?

Sincerely,

Debbie

We’ll need more code than that Debbie as all browsers will automatically size the dropdown to fit the longest content anyway.

None that I tested are showing a gap as in your example. There will be a small gap in chrome as there has to be enough room for the selected arrow to show on the left of the option but other than that all that I checked have no extra space by default. The arrow on the right on the top item also needs space and that space can’t be reduced either.

Have you applied padding or a width somewhere else?

At the very least we need code showing the problem and an indication of which browsers you are having the problem in. The only reliable way to shorten the default display is to apply a width and control it explicitly.

Late to the party, but here goes…

The negative and positive margins are causing the jumping. No choice but to dump them.

Yes, the space to the right of the data does seem disproportionately wide. In my tests (on a PC) using Firefox and Chrome, the allowed space is exactly the same as is needed by the widest element. After deleting the margins, no shifting occurs when selecting any data whether “no” or “Pennsylvania”.

Is any other style forcing that select box to be wider than it should be? perhaps by adding margin or padding to the data?