# Espacios entre ui-card-panel (element.style)

**URL:** <https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812>\
**Category:** Dashboard\
**Created:** [25 August 2023 19:41 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812 "2023-08-25T19:41:33Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [25 August 2023 19:41 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/1 "2023-08-25T19:41:33Z")

</div>

Hola a todos, estoy trabajando en un proyecto personal en que espero puedan apoyarme

Me encuentro desarrollando una aplicación de monitoreo de grupos electrógenos y en el desarrollo de los dashboard me he topado con un inconveniente.

Al diseñar la pantalla, cada grupo que compone el layout se encuentran sin espaciado entre ellos (el espaciado en pixeles es mínimo), he estado intentando sin éxito acceder a cada ui-card-panel y modificar su propiedad element.style especificamente la que definen la posición de la tarjeta (top y left)

![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/9/39c36e192a672a0a1ddd0d05016fe2b654e21b19.jpeg)

lo que intento buscar es la siguiente separación:

 ![3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88e8e69ceecdb3705c64ad3be3b59a96d0fd6073.jpeg)

Entiendo que con el nodo template se puede realizar esta función pero no he encontrado como acceder a cada tarjeta individualmente

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 August 2023 20:52 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/2 "2023-08-25T20:52:56Z")

</div>

Hola @jaqp216.

> [@jaqp216](#):
>
> Al diseñar la pantalla, cada grupo que compone el layout se encuentran sin espaciado entre ellos (el espaciado en pixeles es mínimo)

[When designing the screen, each group that makes up the layout is without spacing between them (pixel spacing is minimal),]

Does this help?

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33d4e382aa5e87a23bc73ba19a987b88699258cc.jpeg)

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [26 August 2023 22:41 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/3 "2023-08-26T22:41:03Z")

</div>

Hola @jbudd .

No, estas propiedades agregan espacio en los objetos que componen a cada tarjeta (interno en el grupo). Lo que requiero es agregar un espaciado entre cada tarjeta (ui-card) como en la segunda imagen del primer post.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 August 2023 04:03 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/4 "2023-08-27T04:03:26Z")

</div>

> [@jaqp216](#):
>
> [No, these properties add space in the objects that make up each card (internal in the group). What I require is to add a spacing between each card (ui-card) as in the second image of the first post.]

What version of Node-red and node-red-dashboard are you using?

It looks like you have already customised the layout?  
Can you show us your CSS please?

On my dashboard I can see elements named **ui-card-panel** (which contains the group) and **md-card** (contains a node such as the gauge) but I don't see **ui-card** so I don't know what you want to change.

Your dashboard shows several different spacings:  
 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/8340070eee416416d23ffb2db2865ab3e36a635a.jpeg)  
Which one[s] do you want to adjust, a = c and d = b? Something else entirely?

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [27 August 2023 16:06 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/5 "2023-08-27T16:06:13Z")

</div>

Hola @jbudd

Disculpa, omití escribir el nombre del componente error, en efecto es el **ui-card-panel**...

El ajuste en espació que deseo efectuar son los literales a, b que muestras resaltados en el primer circulo rojo a la izquierda.

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [27 August 2023 16:16 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/6 "2023-08-27T16:16:09Z")

</div>

@jbudd aquí esta el template en CSS

 /\* body { background: -webkit-linear-gradient( 50deg, #009785 0%, #245aa5 100% ) !important; -webkit-touch-callout: none !important; color: #ffffff !important; padding-top:5px !important; } body.nr-dashboard-theme md-toolbar, body.nr-dashboard-theme md-content md-card { background-color:transparent; color: #FFFFFF; } \*/ ui-card-panel { border-radius: 20px; box-shadow: rgba(60,179,113,0.8) 0px 2px 3px; } ui-card-panel \* { border-radius: 50px; } ui-ui-button { border: none; color: white; padding: 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 2px 2px; //border-radius: 10px; } .nr-dashboard-theme .nr-dashboard-button .md-button{ border-radius:30px; }

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 August 2023 02:08 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/7 "2023-08-28T02:08:54Z")

</div>

> [@jaqp216](#):
>
> El ajuste en espació que deseo efectuar son los literales a, b que muestras resaltados en el primer circulo rojo a la izquierda.
> 
> [The spacing adjustment I want to make are literals a, b that you show highlighted in the first red circle on the left.]

I do not understand why your dashboard shows a bigger gap at **a** and **b** than at **c** and **d**.  
Is it possible this is a side effect from a CSS template from a different flow?

Here is a simple dashboard with several groups and no custom CSS (I have messed with the group widths a bit)

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c188709f882a21f17ec2660cffbae1837e0d7f6.jpeg)

And here it is with your CSS:

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2a547cc56b62c2ad8bbe0e6944b98a6b3f3200d.jpeg)

Maybe someone else can help identify the problem.  
It would help if you post a full screen snapshot of the dashboard and an export of the flow which generates it.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [28 August 2023 11:24 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/8 "2023-08-28T11:24:29Z")

</div>

1. Please export your flow and paste it to a reply
2. what version of Node-red are you using? (see the startup log)
3. what version of the dashboard are you using? (see the startup log)

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [28 August 2023 15:09 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/9 "2023-08-28T15:09:22Z")

</div>

Hola @jbudd.

Me parece que no me expliqué bien, el objetivo final que busco es tener el espaciado entre ui-card-panel como los puntos **a** y **b** , es esa la meta final aumentar el padding entre **ui-card-panel**.

El tablero de mando es el que se muestra en la siguiente imagen, donde solo se está ejecutando un nodo template

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74728a868ddbd7437e1043ccded20d1f9f73e326.jpeg)

Saludos

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [28 August 2023 15:09 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/10 "2023-08-28T15:09:57Z")

</div>

@zenofmud la versión de node-red es: 3.0.2 y de los nodos dashboard es: 3.2.0

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 August 2023 16:09 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/11 "2023-08-28T16:09:32Z")

</div>

![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfe696cb7d3104412accb629da0f2f7a476d05f0.jpeg)

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a4e30395e8f85813300f3b653076909b63ec9ddb.jpeg)

If this does not work for you, you need to  
Export your flow - CTRL E, click JSON tab and "Copy to clipboard"  
Paste it here - `</>` button, paste your code over the top of "type or paste code here"

---

<div class="post-metadata">

**Author:** ![jaqp216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaqp216/32/82295_2.png) [@jaqp216](https://discourse.nodered.org/u/jaqp216)\
**Post date:** [29 August 2023 00:05 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/12 "2023-08-29T00:05:26Z")

</div>

@jbudd Esta fue la solución, gracias

---

<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:** [12 September 2023 00:05 UTC](https://discourse.nodered.org/t/espacios-entre-ui-card-panel-element-style/80812/13 "2023-09-12T00:05:41Z")

</div>

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