javascript - JQuery 对话框中的元素太大

标签 javascript jquery html css

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

$(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
  });
});
<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>

您会看到对话框的大小(和里面的内容)比按钮大得多。我怎样才能正确设置它?

最佳答案

由于您正在使用这个属性,您的表更大了

size="85"

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

只需删除它们并尝试,它工作正常

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

关于javascript - JQuery 对话框中的元素太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47968562/

相关文章:

jquery - 尝试使用 hasClass() 实现 if 语句,但它不起作用

javascript - jQuery 导航菜单插件推荐

html - 将鼠标悬停在输入标签上不起作用

javascript - 使用 ng-class 附加 css 时 uib-rating 没有变色

javascript - 在响应式 JQuery/CSS 菜单中显示子项

javascript - 通过字符串访问 JavaScript 中的事件数据以指定要捕获的输入表单

html - H1-H6 标签最常见的字体大小是什么

javascript - 将鼠标悬停在被另一个元素的填充覆盖的元素上

javascript - Ajax JSON 响应到 HighCharts

javascript - UILayout 的可变范围