jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › The Notification appears BEHIND the splitter control

Tagged: , , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  BrentH 9 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    The Notification appears BEHIND the splitter control Posts
  • November 25, 2014 at 9:28 pm The Notification appears BEHIND the splitter control #63313

    BrentH
    Participant

    How do I get the notification to appear OVER the splitter control: Here is some sample code. Run it and you will see the Notification but it is hiding behind the splitter. As you can see, I have a very large z-index, but it doesn’t have any effect.

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Test GV Property Service</title>

    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="Styles/StyleSheet.css" />

    <script type="text/javascript" src="Scripts/jquery-1.11.1.min.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/jqxnotification.js"></script>

    <script>
        $(document).ready(function () {
            $("#messageNotification").jqxNotification({
                width: 'auto', position: 'top-right',
                autoOpen: false, autoClose: true, autoCloseDelay: 3000, template: "info", theme: 'ui-smoothness'
            });

            $("#splitter").jqxSplitter({
                width: '80%', height: '100%', orientation: 'horizontal', theme: 'ui-smoothness', showSplitBar: false,
                panels: [{ size: '75%', min: '55%', collapsible: false }, { min: 70, collapsed: true }]
            });

        });

        function displayNotification() {
            $("#messageDiv")[0].innerHTML = 'This notification hides behind the splitter!  Can you see it?';
            $('#messageNotification').jqxNotification('open');
        }

    </script>

</head>
<body>
    <div id="splitter">
        <div id="mapDiv">
            <button onclick="displayNotification();">Press Me</button>
            <div id="messageNotification" style="z-index: 1000000000;">
                <div id="messageDiv"></div>
            </div>
        </div>

        <div id="ContentPanel">
        </div>
    </div>
</body>
</html>
    November 26, 2014 at 6:34 am The Notification appears BEHIND the splitter control #63333

    Dimitar
    Participant

    Hello BrentH,

    We tested the following, slightly modified, version of your example:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Test GV Property Service</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <!--<link rel="stylesheet" type="text/css" href="Styles/StyleSheet.css" />-->
    <style type="text/css">
        html, body
        {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxnotification.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#messageNotification").jqxNotification({
                width: 'auto', position: 'top-right',
                autoOpen: false, autoClose: true, autoCloseDelay: 3000, template: "info", theme: 'ui-smoothness'
            });

            $("#splitter").jqxSplitter({
                width: '80%', height: '100%', orientation: 'horizontal', theme: 'ui-smoothness', showSplitBar: false,
                panels: [{ size: '75%', min: '55%', collapsible: false }, { min: 70, collapsed: true}]
            });

        });

        function displayNotification() {
            $("#messageDiv")[0].innerHTML = 'This notification hides behind the splitter!  Can you see it?';
            $('#messageNotification').jqxNotification('open');
        }

    </script>
</head>
<body>
    <div id="splitter">
        <div id="mapDiv">
            <button onclick="displayNotification();">
                Press Me</button>
            <div id="messageNotification" style="z-index: 1000000000;">
                <div id="messageDiv">
                </div>
            </div>
        </div>
        <div id="ContentPanel">
        </div>
    </div>
</body>
</html>

    and the notification appears, as expected, over the splitter, not under it. Maybe there is something in your file StyleSheet.css that makes other modifications to the notification or splitter. Please also make sure you are using the latest version of jQWidgets (3.6.0).

    Best Regards,
    Dimitar

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

    December 1, 2014 at 2:46 pm The Notification appears BEHIND the splitter control #63590

    BrentH
    Participant

    Yes, I had put a z-index: 1 on the splitter div for some reason.

    Thanks

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

You must be logged in to reply to this topic.