How can I make this 1x1 spacer invisible?

Hi everyone,

I want to make this 1x1 spacer invisible to make my dashboard look good.

image

Best regards

Have you tried a Dashboard spacer?

1 Like

Thank you for your response

I want to leave this space, between buttons so they are not tucked in together and leave a space

Is it possible to make it invisible?

Best regards!

Do you mean the space between the buttons (B on my snapshot) or the space above the buttons (A)?

If it's the space above, what about making that element the full width of your dashboard?
Alternatively, what happens if you change the background colour of the theme?

1 Like

I want to leave a gap in space A, which is Group 3.

image

If I remove group 3, the B buttons are moved up.

Some possible approaches:

  1. Make Group 3 the same width as AIR_PLC_1_... and PULSADOR...
  2. Make the spacer the full width of the group.
  3. Remove Group 3 and put the spacer at the bottom of the group above or the top of the group below.
  4. Change the background colour of the template to match the spacer colour.
  5. Give Group 3 a CSS class so that you can style it's background colour, borders etc to match the template.
1 Like

Thank you for your response

How can I put css to the spacer, background colour that is the same as the background?

Don't know if it is a bug or done intentionally but you can't actually add custom class to the spacer.
So you may have ui_template node with the size you want and you can make the appearance of it as you like.

1 Like

The first 4 suggestions seem to me much simpler than option 5. Have you tried them?
If they did not work please show us the result.

But you can add a class to the group, which @Loveflowersx seems to have created for the sole purpose of containing his spacer.
I have not experimented with styling the group, and I'm not likely to try unless I'm sure the simple suggestions fail.

1 Like

That works of course...

.my-group .nr-dashboard-spacer{
    border: 1px solid red;
}

But it applies to all spacers in that group and there is not any easy way to target one specific if there is more than one.

1 Like

Expanding on option 3
You do know there is a dashboard layout editor?
Untitled 3

So for example here I dragged the "Save" button down to leave a gap:
Before

After

1 Like

My experience is that if you want a defined layout then it is best to do it all within one group, using the layout editor as @jbudd suggests. Don't use multiple groups for layout.

1 Like

Smells like a bug to me…
As the field to set the class is there, it should honour it.

1 Like

For me the spacer is kind of helper node for layouting only. If to use it as decorative element it still requires to keep the position and size but you can't omit some CSS rules what the user can add or modify. Even it gives more freedom to do stuff, it also opens all doors to create complete mess.

1 Like

Hi everyone,

I don't like to have everything in the same group, I want to leave each group in its own place on the dashboard. I'm going to try putting a template with its colour! If it doesn't work well I'll do it all in the same group.

Thank you very much!

I would be interested to know why, if merging the groups solves your problems.

1 Like

I think it's more for the organisation of the graphics display and in another group you put the buttons.
Could it be that I don't know how to choose a theme (dashboard) well? :rofl:

Hi everyone again,

A question @hotNipi ,

Where can I put this code you provided to make it invisible?

.my-group .nr-dashboard-spacer{
border: 1px solid red;
}

image

Best regards!

Question is what is the "it".

A template node, I want to leave that gap like this, did I understand with a template node?

image

Best regards!