Dashboard 2 - Align center for UI-Switch

[Soiski]

Having scratched my head and bumbing to brick wall for 16 hrs... I need help.

Trying to get the ui-switch to display in dashboard2 the "text and switch" in 4x1 box in total of 8x1 in center. By default it seems to be on left. Thought that this was possible via CSS inject. I found references how to do this in text box ( or actually only for color) but was not able to find the center align for ui-switch (nor working for text).

from vuetify I think its "justify-center" but no idea how and where to inject it.

Again help appreciated.

[hotNipi]

Hard to understand the requirements but I'll try ..

You have group (card) width 8 units
You want to have switch node centered in single row and occupying horizontal space of 2 units.

This can be done by adding class to widget and the CSS to the page:

.single-widget-centered-in-8{
    grid-column-start: 4;
}

But if you now add more items to that group, there's space available in that row where switch is so if something fits to same row, it will go there. To avoid that, I think it maybe takes to have some dummy node to occupy that available space or you need to adjust placements (takes to deal with CSS grid) for all widgets in that card(group)

For DB1 there was spacer thingy which was automatically added for this kind of situations. DB2 doesn't have this. Don't even know if it comes at some point

[Colin]

I have used an empty text node as a spacer.

[hotNipi]

It does the trick for sure but in reality the layout is business of CSS. But to provide low code or no code solution for every imaginable situation is not possible. That's the problem not only for this situation but for many similar. Somewhere must be drawn the line what is possible without needing to dive into coding. DB1 took that situation on but also gained heavily memory usage.

So nothing straightforward and easy to decide.

[hotNipi]

Dedicated solution for ui-switch :
Make it to occupy full row, then add class for it and CSS for page

.single-switch-centered-in-row .nrdb-switch{
    justify-content: center;
    gap:1rem;
}
.single-switch-centered-in-row .v-label{
    flex-grow: 0 !important;
   justify-content: flex-end;
}

[Soiski]

@hotNipi

.single-widget-centered-in-8{
    grid-column-start: 4;
}

Thank you this helped a lot

[Soiski]

If I have two CSS commands that I need to insert do I just add second msg.class command to the flow

like .single-switch-centered-in-row .nrdb-switch

and on second call

.single-switch-centered-in-row .v-label

on this sample just using the .single-widget-centered-in-8 (as it did the trick)

[hotNipi]

If you want it to move around than and then only you'll need to send CSS via msg.class
But I think this case needs it to be statically defined