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.
8 Answers
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.
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>Related