Question

jquery-ui对话框声明中的<select>输入未显示在正确的位置。它始终位于对话框的顶部！

以下是代码：

<div id="newarticle-form" title="Cr&eacute;ation nouvel article">
    <form action="http://localhost/ravioles/administration/articleAjout" method="post" accept-charset="utf-8" id="newarticleform">  <fieldset>
        <label for="code" class="label-class">Code article</label>
        <input type="text" name="code" id="code" size="6" maxlength="6" class="text input-class" />
        <label for="validite" class="label-class">Date de validit&eacute;</label>
        <input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" />
        <label for="libelle" class="label-class">Libell&eacute;</label>
        <input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" />
        <label for="poids" class="label-class">Poids (g)</label>
        <input type="text" name="poids" id="poids" value="" size="5" maxlength="5" class="text input-class" />
        <label for="pu" class="label-class">Prix unitaire</label>
        <input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" />
        <label for="categorie" class="label-class">Cat&eacute;gorie</label>
        <select id="categorie" >
            <option value="00001">RAVIOLES</option>
            <option value="00002">PATES FRAICHES DU ROYAN</option>
            <option value="00003">PATES FARCIES DU ROYAN</option>
            <option value="00004">QUENELLES</option>
            <option value="00005">TRAITEUR</option>
            <option value="00006">SAVEURS EXPRESS</option>
            <option value="00007">CONSERVES ET SAUCES</option>
        </select>
    </fieldset>
    </form>
        <p class="validateTips"></p>
</div>

javascript中的对话框：

$( "#newarticle-form" ).dialog({
    autoOpen: false,
    height: 'auto',
    width: 700,
    modal: true,
    resizable:false,
    buttons: {
        "Ajouter article": function() {
            bla bla bla ...
        },

        "Fermer": function() {
            $(this).dialog( "close" );
        }
    },

    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    },
});

在jquery-ui对话框的元素中给出正确的位置是很安静的。

感谢您的帮助！

Answer 1

我没有找到好的解决方案但是我在对话框中找到了一个表：

<div id="newarticle-form" title="Cr&eacute;ation nouvel article">
    <form action="http://localhost/ravioles/administration/articleAjout" method="post" accept-charset="utf-8" id="newarticleform">  <fieldset>
        <table><tr><td>
            <label for="code" class="label-class">Code article</label>
            <input type="text" name="code" id="code" size="6" maxlength="6" class="text input-class" />
        </td></tr><tr><td>
            <label for="validite" class="label-class">Date de validit&eacute;</label>
            <input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" />
        </td></tr><tr><td>
            <label for="libelle" class="label-class">Libell&eacute;</label>
            <input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" />
        </td></tr><tr><td>
            <label for="poids" class="label-class">Poids (g)</label>
            <input type="text" name="poids" id="poids" value="" size="5" maxlength="5" class="text input-class" />
        </td></tr><tr><td>
            <label for="pu" class="label-class">Prix unitaire</label>
            <input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" />
        </td></tr><tr><td>
            <label for="categorie" class="label-class">Cat&eacute;gorie</label>
            <select id="categorie" >
            <option value="00001">RAVIOLES</option>
            <option value="00002">PATES FRAICHES DU ROYAN</option>
            <option value="00003">PATES FARCIES DU ROYAN</option>
            <option value="00004">QUENELLES</option>
            <option value="00005">TRAITEUR</option>
            <option value="00006">SAVEURS EXPRESS</option>
            <option value="00007">CONSERVES ET SAUCES</option>
        </select><br>
        </td></tr></table>
    </fieldset>
    </form>
        <p class="validateTips"></p>
</div>

谢谢！ ^ _ ^

Answer 2

我有完全相同的问题。奇怪的是，在添加<hr />或<select>元素时，对话框会向上移动到顶部。将元素包装在表格中可以解决问题。

<select>...</select>
<hr />
<more content>

成了

<table>
  <tr>
    <td><select>...</select></td>
  </tr>
  <tr>
    <td><more content></td>
  </tr>
</table>

祝所有找到这个的人好运！博

jquery-ui对话框中<select>的错误行为（错误的显示位置）</select>

2 个答案: