How to make dropdown menu stay on top of other visualization below it

Elastic Stack Kibana
1

I am using the kibana-html-plugin from https://github.com/5thColumn/kibana5-html-plugin. My html in the plugin has the css styles for a dropdown menu, and the html to create a couple of them. The height of the visualization is the smallest possible, such that when the dropdown menu appears, it extends beyond the bottom border of the visual. If there is nothing below the html visual, it works fine.

menu-over

However, when another visual is placed below the html visual, the drop down menu appears under the other visual.

menu-under

One thing I noticed is that by going into dashboard edit mode, and dragging the html visual even the smallest amount, the dropdown menu will overlay the lower visual, until something else is clicked.

menu-move

The html is below. To keep it small, it only implements one dropdown menu.

<style>

* {margin: 0;padding: 0}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
html {height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block;      }
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}

/*GENERIC STYLES*/
body { -webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
/*NAV*/

header {
    display: block;
    position: fixed;
    z-index: 2147483647 !important;  
  }

header > nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

header > nav > ul > li {
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all linear 0.1s;
}

header > nav > ul > li:hover {
    background: #f8f8f8;
}

header > nav > ul > li a + div {
    background: #f8f8f8;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    display: none;
    font-size: 3rem;
    position: absolute;
    width: 125px;
    padding-bottom: .2cm;
}

header > nav > ul > li:hover a + div {
    display: block;
}

header > nav > ul > li a + div > ul {
    list-style-type: none;      
}

header > nav > ul > li a + div > ul > li {
    margin: 0;
    padding: 0;
}

header > nav > ul > li a + div > ul > li > a {
    color: #6bbae9
    display: block;    
    font-size: 1rem;
    letter-spacing: 1.5px;
    padding: .25rem 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
}

header > nav > ul > li a + div > ul > li:hover > a {
    background-color: rgba(0,0,0,.15);            
}

header > nav > ul > li > a {
    align-items: flex-start;
    color: #6bbae9;
    display: flex;
    font-size: 1.55rem;
    font-weight: 200;
    letter-spacing: 1px;
    max-width: 130px;
    padding: 0rem 1.3rem;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
    transition: all linear 0.1s;
}

header > nav > ul > li > a > div > span {
    color: rgba(0,0,0,.75);
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .7rem;               
    font-style: italic;
    line-height: 1rem;
    max-width: 260px;
}

@media (min-width: 990px) {
  header > nav > ul > li > a {
    max-width: 500px;
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  header > nav > ul > li > a > div > span {
    margin: 4px 0 0;  
  }
}
</style>

<header>
<nav role="navigation">

<ul>
    <li>
        <a href="kibana#/dashboard/Stream-1-Overview">
            <div>
                Stream 1
            </div>
        </a>
        <div>
            <ul>
                <li><a href="kibana#/dashboard/Stream-1-App-Latency">App Latency</a></li>
                <li><a href="kibana#/dashboard/Stream-1-Net-Latency">Net Latency</a></li>
                <li><a href="kibana#/dashboard/Stream-1-TCP-Quality">TCP Quality</a></li>
                <li><a href="kibana#/dashboard/Stream-1-VoIP-Quality">VoIP Quality</a></li>
                <li><a href="kibana#/dashboard/Stream-1-Flow-Counts">Flow Counts</a></li>
                <li><a href="kibana#/dashboard/Stream-1-Flow-Explorer">Flow List</a></li>
            </ul>
        </div>
    </li>        
</ul>
    </nav>
</header>

My question is how to make the dropdown menu in the upper html visual appear on top of the lower visual?

2

This is more of CSS question that it is Kibana question .... i am guessing some combination of position: fixed and z-index: 9999999 should work.

1 Like
3

I mostly figured it out. I had to add some javascript to dynamically change position and z-order values. BTW - This is a pretty general purpose pull-down menu for kibana, that I have seen a lot of folks ask for.

The only problem I see now is that when the whole dashboard is scrolled, the menu does not behave well on the hover. It appears at the same place it was before the scroll, but now that it has scrolled there is another panel there so the menu appears on top of it. Not a huge problem if the menu is at the top of the dashboard, because a little scroll, and they menu is scrolled out of view. But it would be a bigger problem if the menu were in the middle of the dashboard.

menu-jump

Here is the mostly working code:

<style>

* {margin: 0;padding: 0}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
html {height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block;      }
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}

/*GENERIC STYLES*/
body { -webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
/*NAV*/

.sv_dropdown {
 
}

header {
    display: block;

}

header > nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

header > nav > ul > li {
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all linear 0.1s;
}

header > nav > ul > li:hover {
    background: #f8f8f8;
}

header > nav > ul > li a + div {
    background: #f8f8f8;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    display: none;
    font-size: 3rem;
    position: absolute;
    width: 125px;
    padding-bottom: .2cm;
}

header > nav > ul > li:hover a + div {
    display: block;
}

header > nav > ul > li a + div > ul {
    list-style-type: none;      
}

header > nav > ul > li a + div > ul > li {
    margin: 0;
    padding: 0;
}

header > nav > ul > li a + div > ul > li > a {
    color: #6bbae9
    display: block;    
    font-size: 1.1rem;
    letter-spacing: 1.0px;
    padding: .25rem 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
}

header > nav > ul > li a + div > ul > li:hover > a {
    background-color: rgba(0,0,0,.15);            
}

header > nav > ul > li > a {
    align-items: flex-start;
    color: #6bbae9;
    display: flex;
    font-size: 1.55rem;
    font-weight: 200;
    letter-spacing: 1px;
    max-width: 130px;
    padding: 0rem 1.3rem;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
    transition: all linear 0.1s;
}

@media (min-width: 990px) {
  header > nav > ul > li > a {
    max-width: 500px;
    font-size: 1.6rem;
    line-height: 3rem;
  }
  
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', MyInit() );
  
  function MyInit()
  {
    var panels = document.getElementsByClassName('gs-w');
    for (var i = 0; i < panels.length; i++) {
        var drops = panels[i].getElementsByClassName('sv_dropdown');
        var node = panels[i];
        if (drops.length > 0) {
            drops[0].style.position = "fixed";
            node.style.position = "absolute";
            node.style.zIndex = 10;
        } else {
            node.style.zIndex = 1;
        }
    }
  }
  
  function MyIn()
  {
    var panels = document.getElementsByClassName('gs-w');
    for (var i = 0; i < panels.length; i++) {
        var drops = panels[i].getElementsByClassName('sv_dropdown');
        if (drops.length > 0) {
            drops[0].style.position = "fixed";
        }
    }
  }
  
  function MyOut()
  {
    var panels = document.getElementsByClassName('gs-w');
    for (var i = 0; i < panels.length; i++) {
        var drops = panels[i].getElementsByClassName('sv_dropdown');
        if (drops.length > 0) {
            drops[0].style.position = "relative";
        }
    }
  }
</script>


<header class="sv_dropdown" onmouseover="MyIn()" onmouseout="MyOut()">
<nav role="navigation">

<ul>
    <li>
        <a href="kibana#/dashboard/Stream-1-Overview">
            <div>
                Stream 1
            </div>
        </a>
        <div>
            <ul>
                <li><a href="kibana#/dashboard/Stream-1-App-Latency"  >App Latency  </a></li>
                <li><a href="kibana#/dashboard/Stream-1-Net-Latency"  >Net Latency  </a></li>
                <li><a href="kibana#/dashboard/Stream-1-TCP-Quality"  >TCP Quality  </a></li>
                <li><a href="kibana#/dashboard/Stream-1-VoIP-Quality" >VoIP Quality </a></li>
                <li><a href="kibana#/dashboard/Stream-1-Flow-Counts"  >Flow Counts  </a></li>
                <li><a href="kibana#/dashboard/Stream-1-Flow-Explorer">Flow List    </a></li>
            </ul>
        </div>
    </li>                                  
</ul>
</nav>
</header>
4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.