jQuery UI Widgets Forums Layouts Splitter Buttons don't work in toolbar above splitters

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • rmoore
    Participant

    I need a 3 panel layout with a toolbar above the panels. I put one together based on your examples. Two questions. First, anything I put in the top panel (my toolbar) does not respond to click events. Can you tell why? I don’t see any errors in Chrome’s developer tools (but I must be missing something).

    Second, is there a preferred way to do this toolbar? I was just going to arrange the controls I need, buttons, droplist, search box, etc.

    <html>
    <head>
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
        <!-- General page styles (not critical to the demos) -->
    
        <link rel="stylesheet" type="text/css" href="main.css" />
        <style type="text/css">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
                $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
                //$("#btnNew").jqxLinkButton({ width: '60', height: '28'});
                $("#btnDetails").jqxLinkButton({ width: '60', height: '28'});
            });
        </script>
    </head>
    <body>
    <div style="position: absolute; width: 100%; height: 34px; background: lightgrey">
        <div style='margin: 3px;'>
        <a href="http://google.com" id="btnNew" target="_blank">New</a>  <a href="#" id="btnDetails">Details</a>
        </div>
    </div>
    <div style="position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 34px; width: 100%; height: 100%;">
        <div id="mainSplitter">
            <div>
                Left Panel
            </div>
            <div>
                <div id="rightSplitter">
                    <div>
                        Top-Right Panel
                    </div>
                    <div>
                        Bottom-Right Panel <br>
                        <a href="http://google.com" id="btnNew" target="_blank">New</a>
                        </br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>
    

    rmoore
    Participant

    The problem with clicking is z-index, this line fixes the problem:
    <div style=”position: absolute; width: 100%; height: 34px; background: lightgrey; z-index: 1″>

    I’m still curious if there’s a better way to do the toolbar, or if you have any suggestions.


    Dimitar
    Participant

    Hello rmoore,

    This is a correct approach, as showcased in the blog post Fluid Layout with Fixed Header and Footer.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.