2011-10-20 25 views
2

maxWidthで定義されたjqueryuiダイアログがあります。JQueryUIダイアログmaxWidth不完全

$("#myDialog").dialog({ 
     autoOpen: false, 
     width: 'auto', 
     maxWidth: 1000, 
     height: 'auto', 
     position: [250, 50], 
     close: function() { 
      $("#myViewer").empty(); 
      someStuff(); 
     } 
    }); 

サイズ変更ハンドルでフォームのサイズを変更すると、maxWidthが意図したとおりに機能します。しかし、フォームにはタブ(2行で表示)と、指定されたスペースをすべて占有しようとするものが含まれています。

フォームを開くと、ブラウザの右端に当たってしまいます。マウスを使用してウィンドウを左に動かすと、右に使用可能なスペースが増えているため、ダイアログのサイズが自動的に変更されます。
ただし、maxWidthでは停止しません。

maxWidthより大きいときにサイズ変更ハンドルを取得すると、maxWidthにリサイズされます。

また、ダイアログのタイトルバーは、ビューポートサイズを変更するか、サイズ変更ハンドルを使用してサイズを変更するまで、ダイアログの幅ではありません。 http://jsfiddle.net/CarlR/PvE3P/22/

私は説明が十分に明確であると思います:

は、ここでのサンプルです。あなたはjsfiddleでそれを試すことができます。問題は初めてダイアログが表示される場合です。
(私はところでGoogleのクロムを使用しています)

+0

あなたはそれにリンクを投稿できますか、または何かhtmlですか? :) –

+0

@MarcoJohannesen完了。 :) –

答えて

4

は、私が何を考えてのjsfiddleですあなたはhttp://jsfiddle.net/PvE3P/41/を探しています。私は$(window).resize()に束縛し、ウィンドウの幅に応じてダイアログの幅を動的に更新します。私はこれが助けて欲しい!

EDIT:

私はもう少しシームレスに動作するようにjsfiddleを更新しました。 http://jsfiddle.net/PvE3P/42/

+0

シンプルで美しく、ただ優れています。ありがとうございました! –

1

あなたは、jQueryのコードでこの

$("#showDialog").click(function(){ 
    $("#myDialog").dialog("open"); 
    var width = $(".ui-dialog").width(); 
    if(width>400){ 
     $(".ui-dialog").css({'width':'400px'}); 
     //fixed if width > 400px, defined width always as 400px 
    } 
}); 

参照のようなもの、いくつかの裁判官を行うことができます:ここでは http://jsfiddle.net/PvE3P/23/

+0

タイトルバーでフォームをドラッグしても機能しません。 –

+0

@Carl R、あなたの目的は何ですか?最小幅は何ですか? 'http:// jsfiddle.net/PvE3P/25 /'で何か更新を見てください。 – Giberno

+0

有望そうです...私はここでいくつかのテストを実行します。 :) –

1
.ui-dialog { 
    ... 
    max-width: 400px; 
}