web-dev-qa-db-ja.com

jQuery UIダイアログボックスでスクロールバーを無効にするにはどうすればよいですか？

Jqueryダイアログボックスでスクロールバーを無効にする方法があるかどうか誰もが知っていますか？ divにあるコンテンツは300ピクセルですが、ダイアログは200ピクセルに設定されています。それは自動的にスクロールバーを配置しますが、私はそれらを望まない。それをウィンドウよりも大きくする2番目のdivに自分で追加します。どんな助けも大歓迎です。

jqueryjquery-uidialogscroll
31
ngreenwood6

jQuery UIダイアログウィジェット を意味しますか？

オプションを作成するときに、オプションを渡してその高さを指定できます。

$('.selector').dialog({ height: 350 });

あなたが入れているコンテンツよりも高くしてください。あなたは黄金になると思います。

11
Paul D. Waite

私はこのような問題を解決しました：

.dialog({
  title: $(this).attr("data-dialog-title"),
  closeOnEscape: true,
  close: function () { $(this).remove() },
  draggable: true,
  position: 'center',
  width: 500,
  height: 'auto',
  modal: true,
  open: function (event, ui) {
    $('#myDialogId').css('overflow', 'hidden'); //this line does the actual hiding
  }
});
68
MUG4N

「jqueryダイアログボックス」の意味は正確にはわかりませんが、スクロールバーを無効にする標準的な方法は、divのoverflowプロパティを「hidden」に設定することです。

これをcssファイルに入れてください：

div.class_name {
  overflow: hidden;
}
6
Paul Woolcock

Overflow：hiddenは私のために働きました。高さ/幅のパラメータのみを設定すると、テキストサイズとズームに応じてスクロールバーが表示されます。

3
DoctorEJB

CSSなしまたは高さ固定のソリューション

上記の問題に対する最善の解決策は、ダイアログの高さを動的にすることであると思います。コンテンツが増加すると、高さがコンテンツごとに自動的に調整されるはずです。これを行うには、Jquery UI modalが提供するheight "auto"オプションを使用します。コンテンツごとにモーダルの高さを調整するため、 'overflow：hidden'または 'height：350'を追加する必要があります。

$( "#dialog" ).dialog({
modal : true,
height:"auto"

});
2
Sanjeev

これにより、スクロールバーが削除されました。

$( "#dialog" ).dialog({
    autoOpen: false,
    resizable: false,
    dialogClass: 'info',
    height: 'auto',
    width: 'auto',
    show: { effect: "blind", duration: 1000 },
    hide: {effect: "explode", duration: 1000 },
    draggable: true,
    open: function (event, ui) {
        $(this).dialog('open');
    },
    close: function (event, ui) {
        cleanup() ;
    }
});
1
smac2020

以下の例では、ダイアログに「resizable = false」も追加しました。そのため、ダイアログのサイズを変更してもオーバーフローテキストは表示されません。

$("a#registerServerStudio , a#regServer").click(function(e) {
    //alert("login using POST is Clicked");
    e.preventDefault();
    registerSuccess = false;

    regSSDlg = $("#regSS").dialog({
      autoOpen: false,
      height: 280,
      width: 420,
      modal: true,
    resizable: false,
      buttons: {
      },
      close: function() {
        registerSuccess = false;
      },
    show:{effect:'bounce', duration: 100},

    });
  $('#regSS').css('overflow', 'hidden');
    regSSDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ;

    regSSDlg.dialog("open");
});
0
Rahul Varadkar