layout problem with select fields (firefox)

Question

The select fields have both the same size attribute, but the options having a class with a specific padding (all the same class). But an empty select field has now a different length if it has no option elements.

+-------------+         +-------------+
| foo         |  +---+  |             |
| bar         |  | > |  |             |
| baz         |  +---+  |             |
|             |         |             |
|             |  +---+  |             |
|             |  | < |  |             |
|             |  +---+  |             |
|             |         +-------------+
+-------------+

HTML

<style type="text/css">    
  select option {padding:1px;}
</style>

<select size="10" style="width:100px;">
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
</select>

[...]

<select size="10" style="width:100px;">
  <!-- empty yet -->
</select>

After connection (a new option appeared in the second select field) the height swaps to the same length as the first

+-------------+         +-------------+
| foo         |  +---+  | baz         |
| bar         |  | > |  |             |
|             |  +---+  |             |
|             |         |             |
|             |  +---+  |             |
|             |  | < |  |             |
|             |  +---+  |             |
+-------------+         +-------------+

Any idea to solve this without specifiying an absolute height for both select fields?

Answer 1

Give a classname to your selects and add this below codes to your css file or style block;

<style type="text/css">    
    .ovHell option {padding:1px;}
</style>
<select class="ovHell" size="10" style="width:100px;">
  <option style="padding:1px;">foo</option>
  <option style="padding:1px;">bar</option>
  <option style="padding:1px;">baz</option>
</select>

[...]

<select class="ovHell" size="10" style="width:100px;">
  <!-- empty yet -->
</select>

Answer 2

This is pretty curious behaviour from firefox. You can fix it by adding a dummy <option>&nbsp;</option> placeholder into the empty select. Then, I suppose, to be fully robust you might want to remove it programatically when you have some real options in place.

Answer 3

How about this solution. It uses css to initially 'fix' the problem and then javascript when the lists change (since I assume your using javascript to do the list changes). (I used jquery because the ascendant selectors .has/:has are very convenient for this case, but you could do the same with a little more work in pure js).

The css is pretty self explanatory but note that the 20px in general is 2 * select size * option padding + 2 * select padding which in this case works out to be 2 * 10 * 1 + 2 * 0 = 20, but only because I removed the default browser padding (in firefox that is 1px). So if you want some padding on the select itself, make sure to incorporate that into your dummy bottom padding value.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script>
    function add() {
        // real add code here
        $('#right').append('<option>new foo</option>');
        fix_select();
    }

    function remove() {
        // real remove code here
        $('#right').html('');
        fix_select();
    }

    function fix_select() {
        $('select').has('option').css('padding-bottom', '0');
        $('select').not(':has(option)').css('padding-bottom', '20px');
    }
</script>

<style type="text/css">
    select { padding: 0 0 20px 0; }
    option { padding: 1px; }
</style>

<select id="left" size="10" style="width:100px; padding-bottom: 0;">
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
</select>

<select id="right" size="10" style="width:100px;">
</select>
<br/><br/>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>