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

Tagged: , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Buttons don't work in toolbar above splitters Posts
  • February 14, 2014 at 5:13 pm Buttons don't work in toolbar above splitters #49539

    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>
    February 14, 2014 at 5:24 pm Buttons don't work in toolbar above splitters #49540

    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.

    February 17, 2014 at 7:50 am Buttons don't work in toolbar above splitters #49610

    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/

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

You must be logged in to reply to this topic.