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.