2017-12-25 9 views
0

JQueryを使用して特定のボタンが押されたときにダイアログを開くページがあります。しかし問題は、コンテンツとダイアログ自体が大きすぎるということです。私はJQueryでダイアログのサイズを調整できることを知っています(実際には幅を1500に設定してください。そうでなければ、中間にスライスされるように見えます)。JQueryダイアログ内の要素が大きすぎます

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

あなたは、ダイアログのサイズ(内部コンテンツ)がボタンよりも大きい方法であることがわかります。どうすればそれを正しく設定できますか?

+0

正常に動作します! –

+0

'resize'属性のみが利用可能です。 –

+0

'size =" 65 "'?!あなたは何をサイズ変更していますか? –

答えて

0

あなたのテーブルが大きいですが、理由はあなたがデフォルトで

size="85" 

表を使用している本のattrのサイズであるだけで、それらを削除し、あなたの場合「85」

で定義されたすべての列に最大値をとりますしてみてください、それはあなたがすべてのこと、あなたの問題ではありません、 `size`属性を設定している

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

+0

まあ、それは本当のようだ、質問はとても愚かです:c –

関連する問題