problème de mise en page avec les champs select (firefox)

Question

Les champs select ont tous les deux la même taille, mais le options a une classe avec un remplissage spécifique (tous de la même classe). Mais un champ de sélection vide a maintenant une longueur différente s'il n'a pas d'éléments option.

+-------------+   +-------------+ 
| 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> 

Une fois la connexion (une nouvelle option est apparue dans le deuxième champ select) les swaps de hauteur à la même longueur que la première Toute idée

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

pour résoudre ce sans spécifier une hauteur absolue pour les deux champs select?

Answer 1

Que diriez-vous de cette solution. Il utilise css pour 'réparer' le problème, puis javascript lorsque les listes changent (puisque je suppose que vous utilisez javascript pour faire les changements de liste). (J'ai utilisé jquery car les sélecteurs ascendants .has /: sont très pratiques pour ce cas, mais vous pourriez faire la même chose avec un peu plus de travail en js pur).

Le css est assez explicite mais notez que le 20px en général 2 * select size * option padding + 2 * select padding qui dans ce cas équivaut à être 2 * 10 * 1 + 2 * 0 = 20, mais seulement parce que J'ai enlevé le remplissage de navigateur par défaut (dans Firefox qui est 1px). Donc, si vous voulez un peu de rembourrage sur la sélection elle-même, assurez-vous d'incorporer cela dans votre valeur de rembourrage de fond factice.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<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> 

Answer 2

Donnez un nom de classe à vos sélections et ajoutez les codes ci-dessous à votre fichier css ou à votre bloc de style;

<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 3

Ceci est un comportement plutôt curieux de la part de firefox. Vous pouvez le réparer en ajoutant un espace réservé <option>&nbsp;</option> dans la sélection vide. Ensuite, je suppose, pour être complètement robuste, vous voudrez peut-être l'enlever par programmation lorsque vous avez des options réelles en place.