Clever Geek Handbook

HTML: select a size other than parameters

It might be a simple window selection problem, but I can't find an answer yet: In my opinion, there are several multi-line select boxes in the line that are defined as size = 9. I use the size attribute instead of the height because it matches the lines (no lines cut). Now my problem is that they have different heights when they have no options in a particular selection.

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

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

However, I figured out that the problem lies with the Helvetica font family, Arial, while it works fine with anything undefined 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 am wondering what I can do to make them the same height with or without parameters. I have tried setting the height of the parameters which have little effect. If I install it like this:

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

this is ok for FF, but not Chrome. Also, it looks messy to me.

Thank you for your help!

+3


source to share


2 answers


Elements select

have different heights because elements option

have line heights and padding. Blank elements select

do not have option lines, so there is no need to apply padding or line height. Your browser is guessing the correct height, but it is clearly not working.



I would just set a minimum height for empty select

elements.

+1


source


I found a hack that works, but I don't know why you need an empty selection,

I am assuming you are settling it later.

just put an empty option in 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;
}
0


source






More articles:


All Articles