Dashboard 2: Bottom Padding in Markdown node?

Dashboard
1

In my current project I'm using a Markdown node with just one line of text:

image
image559Ă—508 23.6 KB

And here is how it gets rendered in the Dashboard:

image
image512Ă—318 16.3 KB

How can I eliminate that huge bottom padding in the group?
I tried several CSS class names AI suggested in the "Class" field but to no avail.

I know that I could use HTML in the Markdown node but I don't want to. It's a Markdown node and I want to stay clean and only use Markdown there.
I know I could use a template node instead but I really want to know why the Markdown node (I love Markdown!) does this and how to change it.
I also added a template node of type "CSS (all pages)" to my flow with this content:

.nrdb-ui-markdown p {
    margin-bottom: 0 !important;
}

.nrdb-ui-markdown .v-card-text {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

This was also AI suggested – and didn't do the trick.

I also checked in the Browser Developer Tools the Box Model and saw that all the padding and margin values (including bottom) are already 0 – for the inner-most <p>, the enclosing <div> of class "nrdb-ui-markdown-content" and the next and next <div> elements (classes "nrdb-ui-widget" and "nrdb-ui-markdown").

I'm out of ideas for the moment and am sure/hopeful there's an easy solution?

2

What does it look like if you put a button of height 1 in the group alongside it?

3

Hi @Colin and thanks for caring (again)! :heart:

With a button it looks like this:

image
image494Ă—290 8.99 KB

So, no difference re the bottom padding, it's the same. (Here it looks good, of course, because we need that space between the Markdown and the button.)

4

Alongside it, not below it.

5

Is it the space that now is shown below the button that you are complaining about, or the space below the text in the markdown node?

6

Ah, sorry, my bad!

Here:

image
image494Ă—232 8.79 KB

7

It's the space below the Markdown text (when there's no button, just the one line Markdown).

8

Try changing the Row Height in the dashboard page theme, but it will affect the vertical height of every dashboard widget.

Alternatively, does it make a difference if you put the markdown and moon phases nodes inside the same group?

Incidentally, why a markdown node rather than a text node?

9

All widgets on a page have the same row height, so a markdown node of height 1 must be the same size as a button of height 1. The row height is configured in the theme for the page. The default is 48px but you can reduce it in the theme for the page.

10

Thanks all for participating!

I eventually chose to use a template node. :wink:

1 Like
11

Thanks too for your detailed feedback on our suggestions.

2 Likes