jQWidgets Forums

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

Tagged: , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    The addition of a button at the bottom causes the Window to Overflow Posts
  • December 9, 2015 at 5:53 pm The addition of a button at the bottom causes the Window to Overflow #79131

    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>
    December 10, 2015 at 7:10 am The addition of a button at the bottom causes the Window to Overflow #79157

    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

    December 15, 2015 at 8:38 pm The addition of a button at the bottom causes the Window to Overflow #79355

    Buggs2015
    Participant

    Worked like a charm ivailo! Thank you so much 🙂

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

You must be logged in to reply to this topic.