jQuery UI Widgets Forums Layouts Panel and Responsive Panel Embedded sizable panel

This topic contains 5 replies, has 2 voices, and was last updated by  parascus 11 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Embedded sizable panel #29006

    parascus
    Participant

    Hello JQWidget-Team,

    I try to create a window which is resizable. In this window there should be a text at the top and some button s at the bottom. These two areas should stay the same size. In the middle I want to define a panel which shows scrollbars if the size is to small for the content. How can I resolve this because my experience so far is, that there is no way to mix up percentage and fixed pixel?

    Kind regards

    Stephan

    Embedded sizable panel #29036

    Dimitar
    Participant

    Hello Stephan,

    Here is an example on how to achieve it:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxwindow ").jqxWindow({ height: 300, width: 300 });
    $("#jqxpanel").jqxPanel({ width: "100%", height: "100%" });
    });
    </script>
    <div id='jqxwindow'>
    <div>
    Header</div>
    <div>
    <div>
    Text</div>
    <div style="height: 100%; box-sizing: border-box;">
    <div id='jqxpanel' style="font-size: 13px; font-family: Verdana; float: left;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </div>
    </div>
    <br />
    <div style="height: 50px;">
    <button>
    Button</button>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Embedded sizable panel #29053

    parascus
    Participant

    Hi Dimitar,

    thank you for your code snippet. Unfortunatelly there’s a problem which I think is not really a panel problem. Giving a height in pixel to the text and the button and to set the percentage of the sourrounding box to 100% is not handled by Firefox. So I tried to modify your solution in setting the height of the surrounding box to the height of window_content_height – height_of_text – height_of_button which works allmost (Code is listed below).

    The problem now is that the scrollbar of the panel is not updated to the height. Is there any way I can force the update of the scrollbar?

    Kind regards

    Stephan

    $(document).ready(function () {
    $(“#jqxwindow “).jqxWindow({ height: 300, width: 300, resizable: false });
    $(“#jqxpanel”).jqxPanel({ width: “100%”, height: “100%” });
    $(“#surround”).height( $(“#jqxwindow > .jqx-window-content”).height() – $(“#top”).height() – $(“#bottom”).height());
    });

    Header
    Text
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.

    Button

    Embedded sizable panel #29054

    parascus
    Participant

    Sorry, I didn’t know that the code has to be transformed:

        <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxwindow ").jqxWindow({ height: 300, width: 300, resizable: false });
    $("#jqxpanel").jqxPanel({ width: "100%", height: "100%" });
    $("#surround").height( $("#jqxwindow > .jqx-window-content").height() - $("#top").height() - $("#bottom").height());
    $("#jqxpanel").jqxPanel({ width: "100%", height: "100%" });
    });
    </script>
    <div id='jqxwindow'>
    <div>
    Header</div>
    <div>
    <div id="top">
    Text
    </div>
    <div id="surround" style="height: 180px; box-sizing: border-box;">
    <div id='jqxpanel' style="font-size: 13px; font-family: Verdana; float: left;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.<br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </div>
    </div>
    <div id="bottom">
    <button>
    Button
    </button>
    </div>
    </div>
    </div>
    </div>
    Embedded sizable panel #29084

    Dimitar
    Participant

    Hi Stephan,

    Here is an updated version of the example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxwindow ").jqxWindow({ height: 300, width: 300 });
    $("#jqxpanel").jqxPanel({ width: "100%", height: "100%" });
    });
    </script>
    </head>
    <body>
    <div id="jqxwindow">
    <div>
    Header</div>
    <div>
    <div style="position: absolute; height: 20px; width: 100%;">
    Text
    </div>
    <div style="position: absolute; height: 100%; width: 95%; margin: 0px; padding-left: 0px;
    padding-right: 0px; box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 20px;
    padding-bottom: 80px;">
    <div id='jqxpanel' style="border: 1px solid red;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </div>
    </div>
    <div style="position: absolute; bottom: 0; width: 100%; height: 30px;">
    <button>
    Button</button>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Embedded sizable panel #29139

    parascus
    Participant

    Cool, thank you. That works fine.

    Best regards,

    Stephan

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

You must be logged in to reply to this topic.