# Display ui-table to full widget size, instead of parent div height

**URL:** https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100
**Category:** Dashboard
**Created:** [22 May 2021 19:50 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100 "2021-05-22T19:50:05Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![karthikraja](https://avatars.discourse-cdn.com/v4/letter/k/e274bd/32.png) [@karthikraja](https://discourse.nodered.org/u/karthikraja)
#### Post date: [22 May 2021 19:50 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/1 "2021-05-22T19:50:05Z")

</div>

Hi Friends, I am new to node-red and trying to create a dynamic ui-table, which am able to. My issue is that, my table height is determined by the height of the parent-div, which I guess is not updated dynamically.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe306a00616debe75413dbd7994ecf12f43e438f.jpeg)

I have gone through [dynamictable](https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2), but I don't create my table as such in the template. Instead I use a function node to append to the result array. Any pointers?

---

<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: [22 May 2021 21:53 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/2 "2021-05-22T21:53:38Z")

</div>

> [@karthikraja](#):
>
> My issue is that, my table height is determined by the height of the parent-div, which I guess is not updated dynamically.

You can set the hight (size) of ui-table if you choose any size except auto. With set to auto it should update the height any time you send the complete table data array (of objects) as msg.payload.

If this don’t solve your problem pleas share th relevant part of your flow here.

---

<div class="post-metadata">

### Author: ![karthikraja](https://avatars.discourse-cdn.com/v4/letter/k/e274bd/32.png) [@karthikraja](https://discourse.nodered.org/u/karthikraja)
#### Post date: [23 May 2021 08:49 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/3 "2021-05-23T08:49:46Z")

</div>

Thanks for the reply. I tired setting the size in the template as shown below

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/7586c6a3f72679ecb910e0e78641d6bc7cdfa5b8.png)  
But Still, the size is updated only as the results are updated. So it is displayed only in small area of the whole widget.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ec5b2e15324e24ce40b840224fce2fed3f34393.png)  
Instead I want it to be displayed the whole size of the widget even when there is only one result.  
Thanks for your help

---

<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: [23 May 2021 09:12 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/4 "2021-05-23T09:12:56Z")

</div>

Hi ... oh I see. I never (tied) to manipulate the ui-table (or better its css?) by a template node. Can you try to change the size of the ui-table node to anything except auto ?

---

<div class="post-metadata">

### Author: ![karthikraja](https://avatars.discourse-cdn.com/v4/letter/k/e274bd/32.png) [@karthikraja](https://discourse.nodered.org/u/karthikraja)
#### Post date: [23 May 2021 09:37 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/5 "2021-05-23T09:37:58Z")

</div>

Thank you very much. It did solve my issue even though I dont' completely understand it (I thought it was no. or rows and columns allowed, so was worried it won't allow dynamic data above the specified size - but I guess I was wrong.). 😃

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

I know, this is a different topic, But any idea how can i alignt column header and row border 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c9c2f3573f04d8932549e1f98b3f322dab0e700.png)

---

<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: [23 May 2021 09:49 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/6 "2021-05-23T09:49:25Z")

</div>

the size of a ui-table is determined by the number of rows in your table in auto mode. if you define a "fixed" size the scroll bars will appear if the length of the table exceeds the available rows.

To your "new" question. I don't know, I never experienced that effect even in complex tables like tree structures and variable column width and custom formatters:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91915ce76e3780dd21ca4cd28c0476f2920472e2.png)

Perhaps messing around with the css in a template node gives you that effect? But I have no experience with template nodes at all.

---

<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: [23 May 2021 09:53 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/7 "2021-05-23T09:53:02Z")

</div>

What I see is that you manipulated your header height ... perhaps look into that.  
[you certainly have already looked into this](http://tabulator.info/docs/4.7/style)

---

<div class="post-metadata">

### Author: ![karthikraja](https://avatars.discourse-cdn.com/v4/letter/k/e274bd/32.png) [@karthikraja](https://discourse.nodered.org/u/karthikraja)
#### Post date: [23 May 2021 13:41 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/8 "2021-05-23T13:41:25Z")

</div>

Messing around with CSS was exactly the problem. You are a lifesaver. Thank you.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f7881925b22b014d710892a050350bfa82e5397.png)

---

<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: [6 June 2021 13:41 UTC](https://discourse.nodered.org/t/display-ui-table-to-full-widget-size-instead-of-parent-div-height/46100/9 "2021-06-06T13:41:56Z")

</div>

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