jQuery UI Widgets Forums Dialogs and Notifications Window The addition of a button at the bottom causes the Window to Overflow

This topic contains 2 replies, has 2 voices, and was last updated by  Buggs2015 8 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • Buggs2015


    I really need your help,

    For some reason or another, when I add any buttons at the bottom of my window, it causes my window to Overflow. Since I have already set the window’s dimensions when I created it, how can I get its contents to be relative to the Window and to not overflow it?

    Here is a picture of what is happening:


    Here is the HTML, CSS and Code in question:

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
    #area {
    	width: 100%;
    	height: 100%;
    #text {
    	width: 100%;
    	height: 100%;
    <script type="text/javascript">
    window.onload = function() {
                        var dialogHtml = $(
                        "<div id='dialog'>"+
                        	"<div id='content'>"+
    						"<div id='text'><textarea id='area'></textarea></div>"+
    						"<div><input type='button' value='OK' id='ok'></div>"+
                        var defaultDialogOptions = {
                            autoOpen: false,
                            showCloseButton: true,
                            resizable: false,
                            isModal: true,
                            okButton: $('#ok'),
                            cancelButton: $('#cancel'),
                            height: 600,
                    		width: 600
                            'initContent': function () {
                                $('#dialog').on('close', function (event) {
                                    return true;
    function test() {
    • This topic was modified 8 years, 7 months ago by  Buggs2015.
    • This topic was modified 8 years, 7 months ago by  Buggs2015.
    • This topic was modified 8 years, 7 months ago by  Buggs2015.


    Hi Buggs2015,

    Your “text” div gets 100% of the jqxWindow’s area, so the additional elements(your button in this case) overflows the window.
    When you uses fixed height of the window, you can use also fixed height of its’ elements.
    If you want to resize the window when it’s initialized, you can use Calc() to substract the height of the additional elements.
    For example:
    height: calc(100% - 30px);

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team


    Worked like a charm ivailo! Thank you so much 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.