# More dumb Dashboard 2 questions

**URL:** <https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 July 2024 11:07 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625 "2024-07-19T11:07:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [19 July 2024 11:07 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/1 "2024-07-19T11:07:55Z")

</div>

My first working (sort of) dashboard has a single group size 12 x 1 [sic] units.  
There is a chart size 12 x 3 units at the top.  
Floating to below that: a table 3x2 [sic] and a text input field 2x1 [sic]  
And below that a static text field 8x1  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94f2a40de75f0477702f234d76401df168767e59.png)

The dashboard appearance varies according to the size of the table (?)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10768a6ac2f6ae02b5e2d1413cbecc00a8b63dd6.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1ab532ac10bc72490fe20c10ecc58d7e9119e45b.png)

Questions:

1. Why does the group size include height? It certainly seems to ignore this.
2. Why is a box drawn around the text input?
3. Why does the height of the text input change to match the table alongside it _even though I specified a height for this widget_?
4. Why is this extra space apparently split between inside and outside the box?
5. A different topic: Is there any way to get rid of the horizontal lines and vertical padding between the table rows? Sure it's pretty but it means I get 5 lines visible without scrolling versus maybe 12.
6. Why are the tops of the table and text input not horizontally aligned?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [19 July 2024 11:49 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/2 "2024-07-19T11:49:41Z")

</div>

> [@jbudd](#):
>
> 1. Why does the group size include height? It certainly seems to ignore this.

It's a good point, you are correct it's mostly ignored. It was inherited from Dashboard 1.0, and we've never really done anything with it. Some legacy work that needs attention.

> [@jbudd](#):
>
> 1. Why is a box drawn around the text input?

We are using the "outline" variant as standard for our implementation of Vuetify/Material Design - you can see the raw component here: [Text field component — Vuetify](https://vuetifyjs.com/en/components/text-fields/#usage)

That makes the label inline with the border. It's made worse in your case here because the strange height issue.

> [@jbudd](#):
>
> Why does the height of the text input change to match the table alongside it _even though I specified a height for this widget_?

Definite bug, this shouldn't be happening at all. I actually think it's a problem with the `ui-table`, rather than the `ui-text-input`. I had this issue yesterday when creating the [Dashboard Flowviewer](https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-flowviewer). If content extends the height _too much_ then the row heights get stretched, trying to accommodate and that causes anything else in the same row to stretch too.

Could I trouble you to [raise an issue/bug](https://github.com/FlowFuse/node-red-dashboard/issues) for that one please?

> [@jbudd](#):
>
> A different topic: Is there any way to get rid of the horizontal lines and vertical padding between the table rows? Sure it's pretty but it means I get 5 lines visible without scrolling versus maybe 12.

This is quickly becoming our most requested feature/request - I've captured it with [Theme: Compact View · Issue #1095 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1095) and it's one of the top items on our priority list.

> [@jbudd](#):
>
> Why are the tops of the table and text input not horizontally aligned?

I don't know for sure, but I suspect it's linked to some leftover html content where a table's label would go.

Could you raise an issue for that too please?

I'll try and fix these today, or next week at the latest.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [19 July 2024 11:51 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/3 "2024-07-19T11:51:06Z")

</div>

Also - none of this is _dumb_ - at least from your side - all issues on our side that we need to (and will) address asap

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [19 July 2024 12:54 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/4 "2024-07-19T12:54:56Z")

</div>

Well they are dumb in the sense of I made minimal efforts to find previous questions/answers on these topics.  
Maybe if there was a forum category for dashboard 2 I would have, but it's a lot of posts to scan!

> [@joepavitt](#):
>
> We are using the "outline" variant as standard for our implementation  
> ...  
> That makes the label inline with the border.

Yes the label on top of the border is interesting. But should it be the default?  
It is surely a good thing for the default dashboard to have a decent appearance but I think that decoration such as rounded corners borders is better left under the control of the flow designer.  
It was very easy with Dashboard 1 CSS to draw a border around a group or individual widgets.  
I might well want a gauge with a text input field immediately below it, appearing to the user as a single entity. A border reinforces the impression of discrete, possibly unrelated widgets.

> [@joepavitt](#):
>
> We are using the "outline" variant as standard for our implementation of Vuetify/Material Design

On my dashboard this "standard" is applied to the text input but not the chart, table or text widgets!

> [@joepavitt](#):
>
> Definite bug, ... I actually think it's a problem with the `ui-table` ... If content extends the height _too much_ then the row heights get stretched, trying to accommodate and that causes anything else in the same row to stretch too.
> 
> Could I trouble you to [raise an issue/bug](https://github.com/FlowFuse/node-red-dashboard/issues) for that one please?

I am not at all sure how to word such an issue.  
The whole way that widgets are arranged confuses me.  
The text field decides for itself how tall it should be, and has vertical alignment to the centre (align-items: center)? This inevitably borks horizontal alignment between widgets.  
The text input also decides for itself how tall it should be and puts a border round just part of it's space.  
Though the text input value is horizontally aligned with the table column headers, having a border and title around it borks the alignment of the tops of the two widgets.  
Edit- Actually I'm not sure these are horizontally aligned.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86e53e42596df49b79dba5212fa4408c4fa77ea4.png)

I don't understand how these indicate an issue with the table, except perhaps that it does not have the same outline box.

I know the dashboard has to accommodate viewing on different width devices.  
Maybe in constructing a dashboard to be viewed on a PC I should be using a different layout?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [19 July 2024 14:06 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/5 "2024-07-19T14:06:57Z")

</div>

> [@jbudd](#):
>
> Maybe if there was a forum category for dashboard 2 I would have, but it's a lot of posts to scan!

There is a tag: [Topics tagged dashboard-2](https://discourse.nodered.org/tag/dashboard-2)

And as per DCJ's [recent announcement](https://discourse.nodered.org/t/announcement-node-red-dashboard-v1-deprecation-notice/89006) anything tagged "Dashboard" can be assumed to mean Dashboard 2

> [@jbudd](#):
>
> Yes the label on top of the border is interesting. But should it be the default?

This was a design decision I made as I thought it gave the cleanest and most modern appearance of the options available. We can surface this as a configuration option for sure.

> [@jbudd](#):
>
> Maybe in constructing a dashboard to be viewed on a PC I should be using a different layout?

For all the Dashboard's I'm building on PC, I'm using "Grid", I still find it the best option. You are hitting bugs here though, so please don't think the mis-alignment is by design.

Even just opening an issue saying "table next to text input, and they;'re not vertically aligned" is plenty enough. It's not on you to provide any more detail than the frustration you're hitting - it's for us (or another community member) to investigate the _why_

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [21 July 2024 07:57 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/6 "2024-07-21T07:57:46Z")

</div>

> [@joepavitt](#):
>
> > [@jbudd](#):
> >
> > 1. Why does the group size include height? It certainly seems to ignore this.
> 
> It's a good point, you are correct it's mostly ignored. It was inherited from Dashboard 1.0, and we've never really done anything with it. Some legacy work that needs attention.

I see value to keep (and enforce) the group height. There may be scenarios where the group content is big, but I would still like to limit its size on the page and scroll internally

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 July 2024 08:08 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/7 "2024-07-23T08:08:06Z")

</div>

I do have plans for [Overhaul group and widget sizing options · Issue #835 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/835)

Which would make the auto/fixed sizings more explicit, as well as introduce a lot more flexibility on the layouts you can build in Dashboard too.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 August 2024 08:08 UTC](https://discourse.nodered.org/t/more-dumb-dashboard-2-questions/89625/8 "2024-08-22T08:08:32Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.