# Dashboard defaults and css

**URL:** <https://discourse.nodered.org/t/dashboard-defaults-and-css/94015>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 December 2024 08:49 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015 "2024-12-19T08:49:19Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 December 2024 08:49 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/1 "2024-12-19T08:49:19Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b8a1a9dab7a7604982a5eb19b5e11e29ed4c49db.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 09:28 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/2 "2024-12-19T09:28:08Z")

</div>

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

```auto
.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.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 December 2024 09:42 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/3 "2024-12-19T09:42:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 09:43 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/4 "2024-12-19T09:43:50Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe765fff7e700dd2c4be994dff2c2f62101b479e.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 December 2024 09:56 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/5 "2024-12-19T09:56:13Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 09:59 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/6 "2024-12-19T09:59:15Z")

</div>

> [@smanjunath211](#):
>
> section used to define just css with `<style></style>`

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

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

```

It is useful for client side javascript

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 December 2024 10:02 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/7 "2024-12-19T10:02:30Z")

</div>

Thank You.. it works!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 December 2024 10:03 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/8 "2024-12-19T10:03:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 10:06 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/9 "2024-12-19T10:06:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 December 2024 10:09 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/10 "2024-12-19T10:09:00Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec56c532d66bcdbaff3980468b2809a6e612cb67.png)

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 10:14 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/11 "2024-12-19T10:14:48Z")

</div>

Edit that group  
Add class for it

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/742223a9133f0e498a08ef105474a90515972855.png)

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

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

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 December 2024 10:22 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/12 "2024-12-19T10:22:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 10:23 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/13 "2024-12-19T10:23:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [19 December 2024 12:45 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/14 "2024-12-19T12:45:13Z")

</div>

> [@hotNipi](#):
>
> Add class for it `hidden-template`  
> And the bit of the CSS
> 
> ```auto
> .hidden-template{
> display:none !important;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 December 2024 13:12 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/15 "2024-12-19T13:12:54Z")

</div>

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.

```auto
.gr-xl-11 {
   row-gap: 44px!important
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 January 2025 13:12 UTC](https://discourse.nodered.org/t/dashboard-defaults-and-css/94015/16 "2025-01-18T13:12:58Z")

</div>

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