How can you disable scroll bars in the jQuery UI dialog box?

Question

Does anyone know if there is a way to disable scroll bars in the jquery dialog box? The content that I have in the div is 300 px but the dialog is set to 200px. It automatically puts the scrollbars but I do not want them. I will add it myself to the second div that makes it bigger than the window. Any help is appreciated.

Answer 1

I solved the problem like this:

.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
  }
});

Answer 2

Do you mean the jQuery UI dialog widget?

You can pass an option when you create it to specify its height, e.g.

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

Make it taller than the content you’re putting into it, and I suspect you’d be golden.

Answer 3

I don't know exactly what you mean by a 'jquery dialog box', but the standard way to disable the scroll bars would be to set the div's overflow property to 'hidden'

put this in your css file:

div.class_name {
  overflow: hidden;
}

Answer 4

The overflow:hidden worked for me. When only setting the height/width params the scroll bars would still appear depending on text size and zoom.

Answer 5

Solution with no css or fixed Height:

I think the best solution to above problem is to make dialog height dynamic, the height should adjust automatically as per content, when content increases modal height should increase. To do this use the height "auto" option provided by Jquery UI modal , it adjusts modal height as per content so need of add 'overflow:hidden' or 'height:350'

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

}); 

Answer 6

This removed the scroll bars:

$( "#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() ;
    }
});

Answer 7

In the example below I also added 'resizable = false' for the dialog. So that any overflow text cannot be seen by resizing the dialog.

$("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");
});

Answer 8

Add the following CSS code to hide any dialog scrollbars:

.ui-dialog-content {
    overflow: hidden;
}

Here a small demo (click on "Full page" for better view):

var reconnectDlg = $('#reconnectDlg').dialog({
    minWidth: 500,
    modal: true,
    autoOpen: false,
    close: function(ev, ui) {
        console.log('reconnect');
    },
    buttons: {
        'Reconnect': function() {
            $(this).dialog('close');
        }
    }
});

var reconnectBtn = $('#reconnectBtn').button().click(function(ev) {
    ev.preventDefault();
    reconnectDlg.dialog('open');
});

.ui-dialog-content {
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<div id="reconnectDlg" title="Connection failure">
    Lost connection to the server!
    Lost connection to the server! 
    Lost connection to the server! 
    Lost connection to the server! 
    Lost connection to the server! 
    Lost connection to the server! 
    Lost connection to the server!
</div>

<div id="reconnectBtn">Click me!</div>