0

AJAX で HTML コードを jQueryUI ダイアログに読み込もうとしています。コード自体はリストであり、リストが 2 つの列を持つテーブルのように見えるように、右端の要素を絶対的に配置する必要がありますが、一部の行のみです。問題は、jQueryUI プラグインがダイアログの幅を正しくサイズ変更していないように見えることです。これは、いくつかの li の絶対配置が原因だと思います。他の同様の質問に対するいくつかの回答を読みましたが、これで私を助けてくれるものはありませんでした。

これは私がロードするコードです:

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

そして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");
        }
    });

ご提案いただきありがとうございます。

4

1 に答える 1

0

リスト要素を表形式で表示する場合は、絶対位置ではなく、CSSのFLOATプロパティを使用します。
HTMLコードを更新しましたが、正常に動作します

<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>
于 2010-04-19T06:22:42.367 に答える