1. ホーム
  2. jquery

[解決済み] 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