[解決済み] JQuery UIダイアログを内容に合わせて自動的に拡大・縮小させる
2022-06-24 09:54:22
質問
JQuery UIのダイアログポップアップで、フォームを表示しています。 フォーム上の特定のオプションを選択すると、新しいオプションがフォームに表示され、フォームの高さが増えます。 これは、メインページにスクロールバーがあり、JQuery UIダイアログにスクロールバーがあるというシナリオにつながる可能性があります。 この 2 つのスクロールバーのシナリオは、見苦しく、ユーザーを混乱させます。
JQuery UIダイアログを、スクロールバーを表示せずに、常にその内容に合わせて拡大 (および縮小) できるようにするにはどうしたらよいでしょうか。 私は、メインページ上のスクロールバーだけが表示されることを希望します。
どのように解決するのですか?
更新しました。 jQuery UI 1.8時点では、(2つ目のコメントにあるように)作業的な解決方法として
width: 'auto'
autoResize:trueオプションを使用します。図解します。
<div id="whatup">
<div id="inside">Hi there.</div>
</div>
<script>
$('#whatup').dialog(
"resize", "auto"
);
$('#whatup').dialog();
setTimeout(function() {
$('#inside').append("Hello!<br>");
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
以下は動作例です。 http://jsbin.com/ubowa
関連
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] jQuery/JavaScript:iframeのコンテンツにアクセスする
-
[解決済み] jQuery UIダイアログのクローズボタンを削除するには?
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] jQueryがどのバージョンで読み込まれているかを確認するには?
-
[解決済み] .text()を使って子タグにネストされていないテキストのみを取得する方法
-
[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは(jQuery + Bootstrap)
-
[解決済み] jquery-ui-dialog - ダイアログの閉じるイベントにフックする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryのpreventDefault()が発動しない
-
[解決済み] jquery 3.0 url.indexOfエラー
-
[解決済み] チェックボックスのチェック/アンチェックは、jqueryを使用していますか?重複
-
[解決済み] jQueryでtextareaの値を設定する
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み] jQueryの複数要素の同一クリックイベント
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか?[重複)。
-
[解決済み] jQueryの検証:デフォルトのエラーメッセージを変更する