# Perspective Table adjust the height of sub view base on the content

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785>\
**Category:** Ignition Early Access\
**Created:** [December 6, 2021, 9:09am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785 "2021-12-06T09:09:06Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [December 6, 2021, 9:09am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/1 "2021-12-06T09:09:06Z")

</div>

Hello,

As my sub views in table have dynamic height, I’d like table component adjust the height of sub view automatically base on the content.  
Now the table component use embedded view default height.  
Is there any CSS trick to fix it?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 6, 2021, 10:01am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/2 "2021-12-06T10:01:23Z")

</div>

I think this is pretty similar, it worked for me but the op of the topic didnt reply to it so idk if it worked for them

> [@How can a Perspective Table SubView not use default height of the subview?](https://forum.inductiveautomation.com/t/how-can-a-perspective-table-subview-not-use-default-height-of-the-subview/51000/3):
>
> You will have to add some styles to the subviews root object, which are bound to the view params, which can be passed along in the table. [image] Overflow should be auto but can be whatever height can be auto but will never be smaller than min-height, which has to be provided as ignition sets minheight to the roots default height here [image] [image]

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [December 6, 2021, 5:21pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/3 "2021-12-06T17:21:58Z")

</div>

but the solution you provide, I have to pass the height which is dynamic based on each row. In my example, each row provides an id which in return pass to subview to generate another table.  
So base on each id, the number of return rows is not known.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 7, 2021, 7:31am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/4 "2021-12-07T07:31:45Z")

</div>

you can set height to auto, you gotta also overwrite min-height tho but just give it something small should do.  
or if you have data from the subview that determines the hieght bind ‘height’ to that instead.  
you just gotta give it a height and min-height somehow:)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 25, 2022, 2:26pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/5 "2022-01-25T14:26:37Z")

</div>

Hi, @nader.chinichian.

I too am struggling with the table-table subview height.

 ![Subview table height CSS](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bfc9a975c1d40c418154654fabeb398cb743a72.png)

I found that if I disable the height setting on the inline properties I could get it to resize.

![Subview table height](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7bb8b2448fe369dc4e57bd6ead5ff7b63880b55.png)

I don’t know enough CSS tricks to know how to suppress this setting in the designer. I’ve got a further problem in that I was playing around with a subview of the subview. This has me thinking I should use a treeview to make the initial selection.

If you come up with anything then please let us know.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 25, 2022, 2:38pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/6 "2022-01-25T14:38:22Z")

</div>

Did you try passing something to the root container of the subview through bindings?

As i suggested here? This should still work for sub sub views i think xd

> [@How can a Perspective Table SubView not use default height of the subview?](https://forum.inductiveautomation.com/t/how-can-a-perspective-table-subview-not-use-default-height-of-the-subview/51000/3):
>
> You will have to add some styles to the subviews root object, which are bound to the view params, which can be passed along in the table. [image] Overflow should be auto but can be whatever height can be auto but will never be smaller than min-height, which has to be provided as ignition sets minheight to the roots default height here [image] [image]

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 25, 2022, 2:45pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/7 "2022-01-25T14:45:21Z")

</div>

Yes, I played around with that but couldn’t get it to work. Your screengrab didn’t fill me with confidence as the scrollbars are visible in the subview. Can you add a bit more detail to that answer maybe?

Many thanks!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 25, 2022, 2:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/8 "2022-01-25T14:46:20Z")

</div>

Yes the scrollbars are visible because i set the height to 25, you can also set it to auto or whatever.  
Just be sure the minheight is the smallest you want it to be, as it overrules the height.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4fc459e25dffaa7013d1ee47392a5de1956b1f37.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/1/11109a33ca63de3443267e5c3623067a7ace9147.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1bfda7e95db246b0f87624bc600b351ec77f74e1.png)

the subview params:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d9e5fb82418741dcadc4ce44c749cef8975c46f.png)  
thesubview root:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/83bb4855827ef6c25333d194b1ac048d9ecff803.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 25, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/9 "2022-01-25T15:22:16Z")

</div>

Thanks for that. I won’t get a chance to look at it today.  
The problem that most of us are having is with the table-table subviews so I’ll be interested to see if I can get that to work.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 25, 2022, 8:08pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/10 "2022-01-25T20:08:22Z")

</div>

I’ve had another look. I don’t think it will work when the subview is a table with variable number of rows. (And the rows may have word-wrap so they’re not guaranteed to be the same height.)

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [January 25, 2022, 9:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/11 "2022-01-25T21:46:37Z")

</div>

This was working for awhile, but I think a few version back the functionality broke. It was done by using a table in the flex subview with a table height set to auto. I got it working at one point, but now I cant seem to replicate it…

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 26, 2022, 8:31am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/12 "2022-01-26T08:31:13Z")

</div>

Works for me 8.1.14,  
i added the data to the params for easy testing…

Do the same as above, make sure the subview table is in a flex view (also bind the height here)  
Set the grow of the table to 1  
**Be sure to turn virtualized false**  
(i also turned of pager)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/37433ea474d95b5bc15df09aaf62205dcda33f8a.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/3362422c65b0db4b11e6c698823953adc1257097.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/def644f00e8a8d33bb0a3ec6280c6ec33b27329f.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4b88fa96b7809436eeec150335dec867b8a2b87.png)

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [January 26, 2022, 3:12pm UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/13 "2022-01-26T15:12:21Z")

</div>

Awesome! Thanks, worked great. The `virtualized` parameter definitely changes the handling of the layout and `auto` basis.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 14, 2024, 7:15am UTC](https://forum.inductiveautomation.com/t/perspective-table-adjust-the-height-of-sub-view-base-on-the-content/53785/14 "2024-04-14T07:15:56Z")

</div>

CSS styling works for me. No need to calculate the height based on rows.  
 ![TableSubviewAutoadjust](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f2a605f2fde17ed7a95473ef905963017ef72761.gif)

```auto
.psc-subview-table-body .ReactVirtualized__Grid{
    height: auto !important;
}

```

 ![Subview_Table_Body](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fb75204372e3fe6141ecedfbe185237268da1c26.png)

```auto
.psc-subview-root{
    min-height: auto !important;
}

```

 ![Subview_Table_Root](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6cf1e77d9effd8b0b53ec3aa6ab99f23d0468ec1.png)
