Alignment groups

[Giamma]

To solve the problem of the groups out of alignment ...

I would like to know if it's possible to have a class that allow to set the widget gap for every group (but another solution is also fine)

I would like to reduce only the left group because the height of right panel is correct for my tablet ...

[jbudd]

This is on a "fixed" layout page, not sure if it will work for "grid" layout.

My page has 3 groups like this (It's a real screenshot but I erased the irrelevant contents)

Each group is defined by the dashboard code vaguely like this

<div class=nrdb-ui-group ......>
   <div class=v-card ......>
...
   </div>
</div>

And while the v-card of group 2 is shorter than group 1:

Both nrdb-ui-group divs have equal height.

Maybe this is only because group 3 exists, I don't know.

So I can make them both the same height by setting a custom class for group 2 height100
And a CSS template

.height100 .v-card {
    min-height: 100% !important;
}

The result:

NB the contents of group 2 don't move down the screen, the group background just extends further down.

[Giamma]

Works fine!
Since the correct height is right group, I deleted from the left group the gauge-linear
decreasing the height and your class fixed the problem.

There is a lot of unused space at bottom but now it's ok for me.
Thank you very much!

[hotNipi]

@Giamma

Since the correct height is right group, I deleted from the left group the gauge-linear

Wrong thing you have deleted. Sort of.

There reason is actually the other gauge.

The root of the issue is following. Widgets can be created to even respect the row height or not.

If they do respect then if you configure the widget to have height 2 units, it's content should never be higher than 2 * row height + widget gap. This way it is possible to have cards with same amount of rows to have same height. Without any need for CSS tricks to apply.

If they do not respect row height, then this row (actually all rows the widgets uses) can grow in height. Having some other widget on that row the row is higher than other rows and usually there is some amount of white space around the widget or just the content grows with the available height.

So the rows having different heights makes the layout inside the card with uneven row heights and therefore cards are uneven also.

[Giamma]

@hotNipi

Wrong thing you have deleted. Sort of.

Hi,
I had seen from the layout the size of the two gauge greater than two row but they are very nice and I didn't want to lose them, for this reason I deleted (unwillingly) the gauge-linear...

[smanjunath211]

Oh! Thank You! Have been struggling due to the misalignment.

[hotNipi]

@Giamma

but they are very nice

That's the thing.
Anyway. I think it is possible to make that gauge to be respectful to row height but it definitely brings in some other edge cases so it is far from straightforward thing to fix/change.