jQuery UI Widgets › Forums › General Discussions › Toolbar dissappears

Tagged: , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Toolbar dissappears Posts
  • March 23, 2015 at 8:30 pm Toolbar dissappears #69026

    adamsch1
    Participant

    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>
    March 24, 2015 at 6:19 am Toolbar dissappears #69036

    Dimitar
    Participant

    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,
    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.