jQuery UI Widgets Forums General Discussions Toolbar dissappears

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 #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>
    
    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/

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

You must be logged in to reply to this topic.