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.