CODEWITHSUNDEEP
htmlcss
sbe
sbe

Reputation: 33

HTML: Select size different without options

this might be a simple select box problem, but I don't find an answer so far: In my view, there are several multiline select boxes in a row, which are all defined to size=9. I use the size attribute instead of height because it fits the lines (no lines are cutted). Now my problem is that they got different height when they have no options in the select defined.

The options are filled with AJAX, but at the beginning some of them are empty.

You can view my problem here: http://jsfiddle.net/nq3gtb7u/5/ (It's okay in IE, but doesn't work in FF or Chrome)

However, I found out that the problem is the font-family Helvetica, Arial, while it works perfectly with nothing defined or Courier for example.

select.wrong
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}
.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}

select.right
{
    font-family: Courier;
    font-size: 8pt;
}
.right option
{
    font-family: Courier;
    font-size: 8pt;
}

<select class="wrong" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="wrong" size="9" style="width:40%;" >
</select>
<br>
<br>
<select class="right" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="right" size="9" style="width:40%;" >
</select>

Now I wonder what I can do to make them the same height with or without options. I tried to set the height of the options, which have a small effect. If I set it like this

.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
    height: 9.75pt;
}

it is okay for FF at least, but not for Chrome. Besides, it looks dirty to me.

Thanks for your help!

Upvotes: 3

Views: 1023

Answers (2)

MrPickles
MrPickles

Reputation: 949

I have found a hack that works but I don't know why you want an empty select,

I am guessing you will populate it later.

just put am empty option in the select

<select class="wrong" size="9" style="width:40%;" >
    <option></option>
</select>

Update:

this is all the code I used in your fiddle example.

HTML:

<select class="wrong" size="9" style="width:40%;">
        <option>A</option>
        <option>B</option>
        <option>D</option>
        <option>C</option>
    </select>
    <select class="wrong" size="9" style="width:40%;" >
        <option></option>
    </select>
    <br>
    <br>
    <select class="right" size="9" style="width:40%;">
        <option>A</option>
        <option>B</option>
        <option>D</option>
        <option>C</option>
    </select>
    <select class="right" size="9" style="width:40%;" >
    </select>

CSS:

select.wrong
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}
.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}

select.right
{
    font-family: Courier;
    font-size: 8pt;
}
.right option
{
    font-family: Courier;
    font-size: 8pt;
}

Upvotes: 0

redelschaap
redelschaap

Reputation: 2814

Your select elements have different heights because option elements have line height and padding. The empty select elements have no option lines, so there is nothing to apply padding or line height to. Your browser is guessing the right height, but it fails obviously.

I would just set a min-height for empty select elements.

Upvotes: 1

Related Questions