Dashboard defaults and css

Dashboard
1

How can I remove the massive paddings in form fields (16px 12px ??) and change the font-size to something smaller ?

Also, the submit button is shown by default and also by default it is shown underneath the form (here also the font-size is way too big by default).

How can I hide the button or have it sit to the right of the input field ?

In addition - when configuring a 'group' - would it be possible to have background styling per group ?
Currently it is an overal setting that applies to each group, in this example I would want to have a transparent background as it is separate from the content.

image
image1554Ă—602 56.1 KB

2

If the target is to create form with one input field and submit button and having components in single row then :

Add class name one-line-form to the form
And a bit of CSS

.one-line-form .v-form{
    display:grid;
    gap:.5rem;
    grid-template-columns:1fr auto;
}
.one-line-form .nrdb-ui-form-actions{
    margin-top: 0;
}
.one-line-form .nrdb-ui-form-row{
    margin-bottom: 0;
}

For sure the CSS added way later than the first rendering occurs thus there will be a layout shift.

3

Thanks, where can i put the css code ? I see that I can add classes to widgets, but where to put the actual css classes+code is a mystery.

4

image
image620Ă—853 29.5 KB

5

An empty template node without any <template></template> section used to define just css with <style></style>, takes up space in the dashboard, is there a way to 'hide ' it but still use css ?

6

For CSS only there's dedicated template types. Use them and there will be no issue.

But if you really want to sail against the wind...

Add class for it hidden-template
And the bit of the CSS

.hidden-template{
    display:none !important;
}

It is useful for client side javascript

1 Like
7

Thank You.. it works!

8

Thanks a lot! I am getting somewhere, but removing the background color on a group seems impossible, because the variables seem to contain an !important tag that i am unable to override. Then again, the classes are an absolute mess, hard time navigating this hierarchy.

9

Show exact use case.
The important flag is not uncuttable stone.

10

hmm ok. I have multiple groups on the page and I want to remove the background+border from 1 particular group:

image
image1194Ă—202 8.68 KB

i see the class bg-group-background sitting there, but i cant seem to override it.

11

Edit that group
Add class for it

image
image633Ă—733 25.9 KB

And the CSS (use one and only CSS template for such common CSS)

.transparent-group .bg-group-background {
    background: transparent !important;
    border-color: transparent;
}
12

ok this is weird, i had exactly the same, except for the name. Could it be a caching thing ?
works now, thanks!

13

Sometimes it takes to refresh the browser (multiple times) and stuff, specially if you play with CSS using the developer tools and leave it open ... I don't know exactly

1 Like
14

or just add the pre-defined d-none class (credit to @Steve-Mcl )

1 Like
15

I do vote with both hands for using already defined classes.

Mostly I don't have time enough to dig down to them to use in quick examples.
And they tend to have a bit cryptic names, thus some additional explanation may needed.

.gr-xl-11 {
   row-gap: 44px!important
}
1 Like