Custom CSS to render Markdown as dropdown menu that overlays other panels?

Elastic Stack Kibana
1

In the absence of a straightforward method for adding custom links to dashboards in the Kibana sidebar menu (I've created a feature request for this), I've been experimenting with custom CSS in a TSVB Markdown panel to implement a multilevel menu of links:

image

(although, I acknowledge that this isn't the context-sensitive solution that I'm really after: for more details, see that feature request)

Can anyone tell me how to make this dropdown menu consistently overlay (render on top of) content in other panels? z-index doesn't appear to be the answer; at least, I can't get that to achieve the effect I want.

Here's the Markdown (nested unordered lists), with placeholder labels and URLs:

- Item 1
  - [Sub-item](#/dashboard/guid)
  - [Sub-item](#/dashboard/guid)
- Item 2
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)
- Item 3
   - [Sub-item](#/dashboard/guid)
   - [Sub-item](#/dashboard/guid)

Here's the custom CSS (bare-bones prototype: it could be much fancier than this; for example, with more transitions; and I'd probably set a width on the dropdown menus):

ul, li {
    margin:0; padding:0; list-style: none; position: relative;
}
li:hover {
    cursor:pointer;
}
a {
    text-decoration:none;
}
ul li:nth-child(3n) {
    background-color: #017f75;
}
ul li:nth-child(3n+1) {
    background-color: #45a29a;
}
ul li:nth-child(3n+2) {
    background-color: #73b9b3;
}

/* Level 1 */
ul {
    display: inline-flex; flex-wrap: wrap;
}
ul li {
    display: inline-flex; padding: 0 0.5rem 0 0.5rem; text-align:left; margin-right: 0.25rem; color: #FFFFFF; height: 2rem; align-items: center;
}
ul li:hover {
    transition: all 0.5s ease-out; background-color: #0d5147; color: #c9f95a;
}

/* Level 2 */
ul ul {
    display: none;
}
ul ul li {
    display: flex; white-space: nowrap; height: 2rem; align-items: center;
}
ul li:hover > ul {
    display: flex; position: absolute; top: 2rem; left: 0;
}
2

@devon.thomson can we get some help?

Thanks
Bhavya

3

@devon.thomson, I thought I'd register my continued interest in this topic. I'm no CSS guru. If you can offer a solution to this—hopefully, with a simple tweak to the custom CSS in the TSVB Markdown panel—I'd be sincerely grateful.

4

I am absolutely not a CSS Guru either unfortunately, and my only inkling (z-index) has already been tried - so I will most likely be unable to help solve this one.

I will ask around though and see if I can find a CSS champion to look into this.

5

Hi @GrahamHannington. The reason you are having issues is because all dashboard panel content is wrapped in an element that applies z-index: 1. Which means all content within that panel is then scoped to within that layer. No matter how high you change the z-index, it will never break free of that z-index: 1. Here's some more context: The stacking context - CSS: Cascading Style Sheets | MDN

The only way you'd be able to get a dropdown to work is if you appended the content to the body of DOM so that it lives outside of the dashboard panel DOM. Unfortunately, you can't do that with pure CSS.

6

Hi @Caroline_Horn , that makes sense. Thanks very much for the clear explanation and the link to MDN. I pity the fools who rely on w3sch... :wink:

you can't do that with pure CSS.

Yes, I hear you. I'll quit beating my head against this and instead light a candle :slight_smile: for feature #99740.

7

You're very welcome. Sorry we couldn't make your solution work.