CODEWITHSUNDEEP
htmlcss
Hannes
Hannes

Reputation: 446

Why has SELECT different height if only one empty option exists?

In this sample http://jsfiddle.net/2SuN8/1/ 

<select>
    <option value="0"></option>
</select>
<select>
    <option value="0"></option>
    <option value="1">A</option>  
</select>

there is a 1px height difference between those two drop-downs.

I assume this happens when one select contains only one empty option.

Should I avoid empty default options or do You know any way to work around this?

I've seen this issue in FF 27.0.1 (Ubuntu 13.10 and Windows Server 2008) and with IE 10 (Windows Server 2008).

Thanks Hannes

Upvotes: 2

Views: 2885

Answers (5)

Guffa
Guffa

Reputation: 700322

The reason that it happens is that in some browsers (for example Firexox) the select element for some reason will grow to accomodate its largest option value, eventhough the value may not be shown in the select in the same way as in the option.

For example:

<select>
    <option value="0"></option>
</select>

<select>
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2" style="font-size:20px">B</option>
</select>

Demo: http://jsfiddle.net/Guffa/2SuN8/3/

In firefox the select element will be tall enough to accomodate a 20px text, but if you choose the option B it will not be shown with the font size specified for the option, but with the font size specified for the select.

One workaround would be to set a specific height to the select. A workaround for the specific case of the empty option could be to use a space inside it, like Sharky showed.

Upvotes: 0

Josh Nester
Josh Nester

Reputation: 29

Set the width and/or the height and they will be the same size. 

<select style="width:100px; height:20px;">
    <option value="0"></option>
</select>

<select style="width:100px; height:20px;">
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2">B</option>    
</select>

Edit: My version is the quick and dirty version, if you want the right way to do it, use a separate CSS file or a space substitute as others have described.

Upvotes: 0

user3428959
user3428959

Reputation:

Yes, you should avoid empty select options. Instead you can set empty value for first option.:

<select>

    <option value=""> - - select - -</option>
    <option value="a"> A </option>
     <option value="b"> B </option>

</select>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

This is happening because you aren't specifying a height for the select element, so by default its height is determined by its content. In the case of your select element with only one empty option, as there is no content, there is no height.

CSS Solution

The CSS solution would be to simply add a default height to your select element:

select {
    height: 20px;
}

JSFiddle demo.

HTML Solution

The HTML solution, as mentioned by others here, is to populate your empty option with some content:

<select>
    <option value="0">&nbsp;</option>
</select>

JSFiddle demo.

In this case, &nbsp; is the non-breaking space entity.

Personally I'd go with the CSS option.

Upvotes: 3

Sharky
Sharky

Reputation: 6274

now there is no different height :D

change

<option value="0"></option>

to

<option value="0">&nbsp;</option>

http://jsfiddle.net/2SuN8/2/

Upvotes: 0

Related Questions