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
    Participant

    Hello,

    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:

    Problem

    Here is the HTML, CSS and Code in question:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <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%;
    }
    
    </style>
    
    <script type="text/javascript">
    
    window.onload = function() {
    
                        //$("#dialog").remove();
    
                        var dialogHtml = $(
                        "<div id='dialog'>"+
                        	"<div>Summary</div>"+
                        	"<div id='content'>"+
    						"<div id='text'><textarea id='area'></textarea></div>"+
    						"<div><input type='button' value='OK' id='ok'></div>"+
    						"</div>")
                        
    
    dialogHtml.appendTo(document.body);
    
                        var defaultDialogOptions = {
                            autoOpen: false,
                            showCloseButton: true,
                            resizable: false,
                            isModal: true,
                            okButton: $('#ok'),
                            cancelButton: $('#cancel'),
                            height: 600,
                    		width: 600
    
                        }
    
                        $("#dialog").jqxWindow(defaultDialogOptions);
    
                        $("#dialog").jqxWindow({
                            'initContent': function () {
                                $('#ok').focus();
                                $('#dialog').on('close', function (event) {
                                    return true;
                                });
                            }
                        });
    
                        
    
    }
    
    function test() {
    
    $("#dialog").jqxWindow('open');
    
    }
    </script>
    </head>
    <body>
    </body>
    </html>
    • 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.

    ivailo
    Participant

    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
    http://www.jqwidgets.com


    Buggs2015
    Participant

    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.