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

[jaqp216]

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)

lo que intento buscar es la siguiente separación:

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

[jbudd]

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?

[jaqp216]

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.

[jbudd]

@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:

Which one[s] do you want to adjust, a = c and d = b? Something else entirely?

[jaqp216]

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.

[jaqp216]

@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; }

[jbudd]

@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)

And here it is with your CSS:

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.

[zenofmud]

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)

[jaqp216]

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

Saludos

[jaqp216]

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

[jbudd]

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"

[jaqp216]

@jbudd Esta fue la solución, gracias