Changing Padding in "group" on Dashboard

In “group”, padding is not configurable by settings, but i tried to change it by UI-template (CSS- All pages). However, despite I tried several changes as below, I couldn’t change it. Any suggestions?

I tried below but not worked:

.nr-dashboard-group {padding: 0px !important;}

.nrdb-ui-group-body { padding: 0 !important; }

In below image, red line is image container and there gap between group container which is grey line.

reference guideline is Layouts | Node-RED Dashboard 2.0

Have you tried editing your dashboard theme(s) Layouts | Node-RED Dashboard 2.0

I tried but gap inside the group is not confifurable.

Surprisingly, the class which defines this seems to be v-card-text.

Try something like

.v-card-text {
    border: 1px solid blue; /* only to verify it's been applied */
    padding: 0;
}

If you find this has side effects elsewhere, you could apply a custom class nopadding to the group[s] you need to style.

.nopadding .v-card-text {
    padding: 0;   /* or 0.1rem, etc. Default is 1rem;*/
}
3 Likes

.v-card-text {
border: 1px solid blue; /* only to verify it's been applied */
padding: 0;
}

Above code worked! Only side effect is that ui-chart borders are also without any gap to group borders. So, I set padding as 2px, which is subitable to for fair padding. thank you very much for the support. Below image is with zero padding.

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