# Ui-table scrollbars

**URL:** https://discourse.nodered.org/t/ui-table-scrollbars/23206
**Category:** Dashboard
**Created:** [16 March 2020 21:27 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206 "2020-03-16T21:27:10Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [16 March 2020 21:27 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/1 "2020-03-16T21:27:10Z")

</div>

First time of using the ui-table node, and finding that I'm always getting a vertical scroll bar, and the bottom row is clipped.  
This was reported in February by @droberts in [this unanswered post](https://discourse.nodered.org/t/node-red-node-ui-table-disable-scroll-bars/21395).  
There is no styling added and the container is much deeper than the chart requires.

I'm using the current version of the node.  
Node-RED version: v1.0.3  
Node.js version: v10.19.0  
OS: Linux 4.14  
Dashboard version 2.19.4

![table](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/68976dfa0ed1f289c78b8b9695e2cd57b4bd3f22.jpeg)

@Christian-Me - any ideas Chris

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [17 March 2020 06:01 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/2 "2020-03-17T06:01:52Z")

</div>

I know there is an issue in the horizontal hight with a more or less working but no elegant fix. I did some modifications but didn’t had time for extensive testing.  
One question, how do yo feed the data in, as a full table (array of objects/rows) or send single rows or cells.  
Second question has the node a fixed size or set to “auto”?  
All my tables (unfortunately) need vertical scrolling.  
I can hopefully take a deeper look the next days - I promise.  
Sorry @droberts for not recognizing your post.

---

<div class="post-metadata">

### Author: ![droberts](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/droberts/32/40295_2.png) [@droberts](https://discourse.nodered.org/u/droberts)
#### Post date: [17 March 2020 06:17 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/3 "2020-03-17T06:17:19Z")

</div>

No worries, I either sorted it or built my own table thing! Will check today.

I was feeding it data for the entire thing including headers etc, running on a Pi and also on Windows.

I tried both fixed size and auto, both had scroll bars no matter how big and there tended to be a gap at the bottom.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [17 March 2020 06:32 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/4 "2020-03-17T06:32:42Z")

</div>

The problem lies in determine the correct height of the final table. So header and rows including spacing, borders ...  
You can find the relevant lines easy and play around with the constants and multiplicators to find the correct total hight  
Another attempt i prefer is to set the height to the available space of the widget (black area on your screenshot). But the grid size of the dashboard and the hight of the rows are different and interfere so in some cases you get cut of last visible rows when you table data reach the last row.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [17 March 2020 09:06 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/5 "2020-03-17T09:06:52Z")

</div>

> [@Christian-Me](#):
>
> how do yo feed the data in

As an array, here is a small example flow to demonstrate;

```auto
[{"id":"c7936fea.41548","type":"ui_table","z":"c9c4eeb8.bad8e","group":"e68a1b8a.416f18","name":"","order":13,"width":"4","height":"4","columns":[],"outputs":0,"cts":false,"x":640,"y":750,"wires":[]},{"id":"9eb02be5.fc7888","type":"inject","z":"c9c4eeb8.bad8e","name":"","topic":"","payload":"[{\"Sensor ID\":\"TH22\",\"Daily Totals\":\"2\"},{\"Sensor ID\":\"TH19\",\"Daily Totals\":\"35\"},{\"Sensor ID\":\"TX18\",\"Daily Totals\":\"35\"}]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":490,"y":750,"wires":[["c7936fea.41548"]]},{"id":"e68a1b8a.416f18","type":"ui_group","z":"","name":"Default","tab":"6952137b.75c85c","order":1,"disp":false,"width":"24","collapse":false},{"id":"6952137b.75c85c","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

> [@Christian-Me](#):
>
> has the node a fixed size or set to “auto”?

Tried both, and get the same result.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [18 March 2020 08:30 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/6 "2020-03-18T08:30:15Z")

</div>

Hi Paul,  
If you send the complete table data in as an array it tries to calculate the table hight by multiply the array.length by the row hight and add the header hight. This may result in inaccurate result due to browser, font or css differences and the scrollbars appear.  
I will issue a PR in the next days to make ui-table to use the full available vertical space when not in auto size mode regardless how you deliver the data.  
This may result in a cut off last visible line but is expected and not a problem as the scroll bars will kick in. And opens the space of any kind of data manipulation later, like adding lines dynamically.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [18 March 2020 12:13 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/7 "2020-03-18T12:13:37Z")

</div>

Submitted the pr .... (home-office makes it possible to sneak out and do some other things ... ok this was a quick lunch break thing 😉

Stay healthy, stay home, keep distance, enjoy the sun.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [18 March 2020 12:22 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/8 "2020-03-18T12:22:08Z")

</div>

> [@Christian-Me](#):
>
> enjoy the sun

That's a bit optimistic for the UK 🙁  
However, looking at the satellite feed, it looks like you are having plenty of sunshine today!

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [18 March 2020 14:35 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/9 "2020-03-18T14:35:38Z")

</div>

Yes, it’s wonderful and peaceful in my garden - hard to stay in front of the screen - But so many things on my todo list.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [19 March 2020 19:51 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/10 "2020-03-19T19:51:38Z")

</div>

Problem should be solved with 0.3.1  
Perhaps give it a try.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [19 March 2020 21:08 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/11 "2020-03-19T21:08:49Z")

</div>

I'm not back home until Saturday, but unless someone else gives you an update in the meantime, I'll get back to you then.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [19 March 2020 21:10 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/12 "2020-03-19T21:10:00Z")

</div>

Take your time, take care.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [24 March 2020 09:10 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/13 "2020-03-24T09:10:16Z")

</div>

Hi Chris, your latest version works fine, and the scroll-bars no longer appear, when there is no overflow.  
Thanks for fixing.

![table](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0fa50ebb5dda52e6a5560ad9bf5d2251298f4b63.jpeg)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [7 April 2020 09:10 UTC](https://discourse.nodered.org/t/ui-table-scrollbars/23206/14 "2020-04-07T09:10:25Z")

</div>

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