TVSB - Markdown Help for Title Panel

Elastic Stack Kibana
1

Hello,

I want to create a text panel where I can add links to the right and wording on the left.
This is what I am trying to do:

image
image1565×106 7.87 KB

^
Like the image above, I want to say something like "Welcome to Elastic" and the left of the same line , add some links.

2

Don't think you are going to be able to do that with TSVB / Markdown.
HTML supports that simple markdown does not as far as I know... probable need to create 2 panels

3

Hi, you can try to use Custom CSS : TSVB Visualization>Markdown>Panel options>Style>Custom CSS

I managed to make a responsive menu like this :

image
image247×192 4.46 KB

This combines markdown and css, maybe you'll be able to do what you want!

2 Likes
4

Hey @GinkoLucas ,
would mind sharing the css you wrote to create this?
Thanks man!

5

Markdown :

- [Menu](https://www.google.com/)
- Click here
  - [First link](https://www.google.com/)
  - [Second link](https://www.google.com/)
- Previous
   - [Yes](https://www.google.com/)
   - [No](https://www.google.com/)

Css :

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 1rem 0 1rem; text-align:left; margin-right: 0.1rem; color: #FFFFFF; height: 4rem; align-items: center;
}
ul li:hover {
    transition: all 0.3s ease-out; background-color: #0d5147; color: #c9f95a;
}

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

It's not perfect, but I imagine you're going to improve it.

2 Likes
6

Wow @GinkoLucas I didn't even know you could do that!!! Today I Learned