jQuery UI Widgets › Forums › General Discussions › Toolbar dissappears
Tagged: fluid, Header, jqxListBox, jqxsplitter, jqxToolBar, layout, ListBox, splitter, toolbar
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 8 months ago.
-
AuthorToolbar dissappears Posts
-
Howdy,
Evaluating jqwidgets and I am mocking up a simple application non-functional prototype.
I want a toolbar across the top of the screen. Below that is a vertical splitter. On the left side of the splitter is a listbox. On the right will eventually be a tabbed interface but I am stuck.
If I do not specify a height for the listbox, everything works. If I specify that the height should be 100%, clicking on an item makes the toolbar disappear.
Attached is my code, which is mainly cut/paste from the excellent documentation.
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" /> <meta name="description" content="This page demonstrates three-pane columns splitter" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.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/jqxsplitter.js"></script> <script type="text/javascript" src="jqwidgets/jqxnavigationbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxdockpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxToolBar").jqxToolBar({ width: "100%", height: 35, tools: "button | dropdownlist combobox | input", initTools: function (type, index, tool, menuToolIninitialization) { switch (index) { case 0: tool.text("Button"); break; case 1: tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "Caf Crema"], selectedIndex: 1 }); break; case 2: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 3: tool.jqxInput({ width: 200, placeHolder: "Type here..." }); break; } } }); $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%'}, { size: '80%'}] }); var source = [ "Instant coffee", "Irish coffee", "Liqueur coffee" ]; // XXX Remove height here and the toolbar will remain. $("#listbox").jqxListBox({ source: source, width: '100%', height: '100%' }); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style> </head> <body style="border:none;"> <div id="jqxdockpanel" style="height: 100%;"> <div id="jqxToolBar"></div> <div id="mainSplitter" > <div style="height:800px"><div id="listbox"></div> </div> <div> </div> </div> </div> </body> </html>
Hello adamsch1,
I think the issue comes from the fact that your mainSplitter has a height of 100% of its parent’s (jqxdockpanel), but it does not “take in mind” the height of the toolbar (35 px). I suggest you take a look at the help topic Fluid Layout with Fixed Header and Footer, which offers an implementation of a similar scenario.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.