Problème de redimensionnement de la largeur de la boîte de dialogue jQuery

Question

Je tente de charger du code HTML dans une boîte de dialogue jQueryUI en AJAX. Le code lui-même est une liste, où les éléments les plus à droite doivent être absolument positionnés de sorte que la liste ressemble à une table avec deux colonnes, mais seulement dans certaines lignes. Le problème est que le plugin jQueryUI ne semble pas redimensionner correctement la largeur de la boîte de dialogue, ce qui est dû au positionnement absolu de certains li. J'ai lu quelques réponses à d'autres questions similaires, mais aucune m'a aidé avec cela.

Voici le code que je charge:

<style type="text/css"> 

    ul {list-style-type:none;margin:0px;padding:0px;} 
    ul ul {margin:0px;padding:0px;} 
    ul>li.fila {margin-bottom:5px;padding-bottom:5px;} 

    ul li.fila ul li 
    { 
     display:inline; 
     padding-left:20px; 
     position:relative; 
     margin-bottom:10px; 
    } 
    ul li.fila ul li.O 
    { 
     background:url(bullet.gif) 5px 8px no-repeat; 
     list-style-position:inside; 
    } 

    </style> 

    <ul id="raiz" > 
    <li class="fila"> 
     <ul > 
     <li style="position:absolute;left:0px;" class="O"> 
     <label for="col1">Col1:</label> 
     <input type="text" name="col1" id="col1" value="vCol1" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     <li style="left:250px;" class="O" > 
     <label for="col2">Col2:</label> 
     <input type="text" name="col2" id="col2" value="vCol2" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     </ul> 
    </li> 
    <li class="fila"> 
     <ul > 
     <li> 
     <label for="col3">Col3:</label> 
     <input type="text" name="col3" id="col3" value="vCol3" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     </ul> 
    </li> 
    </ul> 

Et le constructeur Dialog:

$("#dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     height: 'auto', 
     width: 'auto', 
     modal: true, 
     buttons:{ 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     }, 
     open: function(event,ui){    
      $("#dialog").load("dialogCode.html"); 
     } 
    }); 

Merci à l'avance pour toute suggestion.

Answer 1

Si vous souhaitez afficher vos éléments de liste sous forme de tableau, utilisez la propriété FLOAT de CSS et non le positionnement absolu.
J'ai mis à jour le code HTML et il fonctionne bien maintenant

<style type="text/css"> 

ul {list-style-type:none;margin:0px;padding:0px;} 
ul ul {margin:0px;padding:0px; clear:both} 
ul>li.fila {margin-bottom:5px;padding-bottom:5px;} 

ul li.fila ul li 
{ 
    display:inline; 
    padding-left:20px; 
    position:relative; 
    margin-bottom:10px; 
} 
ul li.fila ul li.O 
{ 
    background:url(bullet.gif) 5px 8px no-repeat; 
    list-style-position:inside; 
} 

</style> 

<ul id="raiz" > 
<li class="fila"> 
    <ul > 
    <li style="position:relative; float:left;left:0px;" class="O"> 
    <label for="col1">Col1:</label> 
    <input type="text" name="col1" id="col1" value="vCol1" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    <li style="position:relative; float:left;" class="O" > 
    <label for="col2">Col2:</label> 
    <input type="text" name="col2" id="col2" value="vCol2" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    </ul> 
</li> 
<li class="fila"> 
    <ul > 
    <li style="position:relative; float:left;"> 
    <label for="col3">Col3:</label> 
    <input type="text" name="col3" id="col3" value="vCol3" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    </ul> 
</li> 
</ul>