Different heights

[Manuwa]

Hello,
When I set the size to automatic, everything fits.

But when I set the size myself, the fields have the same width but are taller, and they no longer fit.

Everything fits where I use automatic size. Where I don't use the full width and set it manually, it doesn't fit. Is that intentional?

Thank you very much

[joepavitt]

Hi @Manuwa - which layout type are you using here? Grid or Fixed?

[Manuwa]

Hi @joepavitt
I use Grid.

Edit: I just tried “fixed.” But same behavior.

[Colin]

Are you using the latest version of the dashboard? It is currently at 1.27.2

Have you got any CSS overrides in your system (probably via ui-templates). If so then try disabling them all to see if that changes the symptom.

Can you post a very short example that we can try, just a few widget, that shows the problem? Possibly just four of the dropdowns from your dashboard.

[Manuwa]

Hello @Colin
I am using version 1.27.2.
I am not using any CSS overrides.

I created a small test flow on another computer to see if the same thing happens there. And it does. However, it only affects the “Text Input” node in “text input (single line)” mode. It works in Color Picker mode. It also happens with the “ui-dropdown” node.

Attached is the test flow.
flows.json (14.5 KB)

As soon as you set the size to Auto for all nodes, everything works. If you set a specific value, it doesn't work.

Thank you very much

[jbudd]

You do seem to have spotted a bug in the way row heights are specified in a page template.

In my pics below, the purple outline is Firefox developer tools outlining a Flex container div class=v-input__control, the blue highlight is the widget div it sits within.

I see that in your template, the row height is set to Comfortable (38px).

When the 'Text' field has Size Auto, the field has a height of 48px, ignoring the template row height.

If you set the field size to 6x1, the row does get the template height of 38px but within it, the div div class = v-input__control still has a height of 48px, resulting in the widget encroaching onto the row below.

And when the text input widget is in color picker mode, it does respect the template row height whether it's size is 6x1 or auto.

Unfortunately I can't track down precisely where in the code it fails to use the template settings.

ps A work-around provided that you have sufficient screen space might be to set the template row height to 48px.

pps Nice looking dashboard by the way

[Colin]

@Manuwa please submit an issue the dashboard bug tracker so that the developers can take a look.

Include your test flow and description and link back to this thread.

[Manuwa]

Hi @jbudd
Thank you very much for your clear explanation. Unfortunately, the display size does not allow me to switch to 48px.
I hope the problem can be solved. In the meantime, I'll just have to live with it.

@jbudd

pps Nice looking dashboard by the way

Thanks a lot my friend

[Manuwa]

@Colin It's done. Thanks