Question

我有一个使用JQuery的页面，并在按下特定按钮时打开一个对话框。但问题是内容和对话本身太大了。我知道在JQuery中我可以调整对话框的大小（我实际上通过将宽度设置为1500来实现，否则它会在中间显示切片），但内容是什么？

＆＃13;

$(document).ready(function() {
  var dialogAddPartDiv = $('#dialogAddPart');

  $('#showDialogButton').click(function() {
    dialogAddPartDiv.dialog('open');
  });

  dialogAddPartDiv.dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      'Save': function() {}
    },
    beforeClose: function(event) {
      if (!confirm("It won't be saved. Continue?")) {
        return false;
      } else {}
    },
    width: 1500
  });
});

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<body>


  <button type="button" id="showDialogButton">+Show Dialog</button>

  <div id="dialogAddPart">

    <table>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td><input type="text" size="80" value=""></td>
      </tr>

      <tr>
        <td>Test:</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td><input type="text" size="80" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>


    </table>

  </div>

</body>

＆＃13;

您会看到对话框大小（和内部内容）的大小比按钮大。我怎样才能正确设置？

Answer 1

由于你正在使用的这个attr

，你的桌子大小

size="85"

默认情况下，表格采用案例“85”中定义的所有列的最大值

只需删除它们并尝试，它可以正常工作

http://jsfiddle.net/Zrz9t/4000/

JQuery对话框中的元素太大了

1 个答案: