Dynamic height for window body - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: div, fixed, footer, grid, jqxgrid, jqxwindow, window

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 11 months ago.

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

Author

Dynamic height for window body Posts
November 12, 2014 at 6:40 am Dynamic height for window body #62550

Sayan
Participant

Hi I am working on JQxwindow in which I need to show a grid in the body and a button is to placed in the footer of the window to add new row in the grid. So on adding new row the body size gets increased and the button moves down how can i solve the issue?

My code.
script::
$(“#jqx_button”).on(‘click’, function () {
//$(“#jqx_Window”).css(“visibility”, “visible”);
$(“#jqx_Window”).css(“display”, “block”);
$(‘#jqx_Window’).jqxWindow(‘open’);
$(‘#jqx_Window’).jqxWindow({
height: 272,
width: 804,
autoOpen: false,

});

});
$(“#Add_New”).bind(‘click’, function ()
$(“#jqxGrid”).jqxGrid(‘addrow’, null, {});
});
html:::
<div id=”jqx_Window” style=”display:none;background-color:transparent;border-bottom:1px #787d7c” >
<div style=”background-color:#d0e6bc” >JqxGrid</div>
<div style=”overflow:hidden;position:relative;background-color:#d0e6bc” >
<div id=”jqxGrid”>
</div>
<div class=”footer”>

<button id=”Add_New” class=”link_button”>Add Row</button>
</div>
</div>
</div>

November 12, 2014 at 8:13 am Dynamic height for window body #62558
Dimitar
Participant
Hello Sayan,

The following example shows how to create a fixed footer in the content of jqxWindow. You can place your grid in the blue div and your button in the green div (footer).
```
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        #content
        {
            position: relative;
            padding: 0;
        }
        #jqxgrid
        {
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            height: 100%;
            padding-bottom: 20px;
            background-color: Blue;
        }
        #footer
        {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            background-color: Green;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 90, width: 150, resizable: true });
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div id="content">
                <div id="jqxgrid">
                </div>
                <div id="footer">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.