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.
-
AuthorEmbedded sizable panel Posts
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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());
});HeaderTextLorem 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
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Cool, thank you. That works fine.
Best regards,
Stephan
-
AuthorPosts
You must be logged in to reply to this topic.