# Perspective Table Row Height in Theme

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758>\
**Category:** Ignition\
**Created:** [September 16, 2020, 5:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758 "2020-09-16T17:46:35Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 16, 2020, 5:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/1 "2020-09-16T17:46:35Z")

</div>

I know that its possible to change perspective table row heights by modifying the `cells.style.height` property. However I am trying to set a defualt minimum height for my application, and am unable to find where in the theme files I would define that value?

I tried the following with no luck

```auto
.ia_table __body__ row--even {
    height: 45px;
}

.ia_table __body__ row--odd {
    height: 45px;
}

```

Any ideas what I would modify to set that default height through theming?

---

<div class="post-metadata">

**Author:** ![Ethan.Strike](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ethan.strike/32/13809_2.png) [@Ethan.Strike](https://forum.inductiveautomation.com/u/Ethan.Strike)\
**Post date:** [September 16, 2020, 6:15pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/2 "2020-09-16T18:15:54Z")

</div>

Keith,

What Ignition version and what [container](https://docs.inductiveautomation.com/display/DOC80/Views+and+Containers+in+Perspective#ViewsandContainersinPerspective-Containers) are you using? The default width and height can be adjusted by changing the width and height Props. However how it reacts on screen depends on the container being used.

Breakpoint versus Flex Container  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8f8c18da7e9bfba38e4972ccfa90815d6a12064.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e1cdd670cd78114cd0e0a8f9f0c1478b25e85f99.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 16, 2020, 6:20pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/3 "2020-09-16T18:20:49Z")

</div>

> [@Ethan.Strike](#):
>
> What Ignition version and what [container](https://docs.inductiveautomation.com/display/DOC80/Views+and+Containers+in+Perspective#ViewsandContainersinPerspective-Containers) are you using?

I am talking about the Table component, not a container 🙂 hahaha

---

<div class="post-metadata">

**Author:** ![Ethan.Strike](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ethan.strike/32/13809_2.png) [@Ethan.Strike](https://forum.inductiveautomation.com/u/Ethan.Strike)\
**Post date:** [September 16, 2020, 6:40pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/4 "2020-09-16T18:40:48Z")

</div>

Ah, I see haha! I’m unsure then, someone else want to take a crack at it while I dive into remembering how to theme? 😅

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 16, 2020, 6:42pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/5 "2020-09-16T18:42:04Z")

</div>

> [@Ethan.Strike](#):
>
> someone else want to take a crack at it

_@cmallonee or @nminchin enters the chat_

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 16, 2020, 8:28pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/6 "2020-09-16T20:28:08Z")

</div>

I would try

```auto
. ia_table__rowGroup{
    height: 45px;
}

```

and remove the two entries you supplied to prevent masking the new `ia_table__rowGroup`. If you’re not seeing these changes take effect, are you perhaps running into a caching issue? If you’re looking in the Designer, remember that it is a separate cache from your browser.

Additionally, if you inspect the rows in the browser, are you seeing the setting in place? Is it being overridden by anything?

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 16, 2020, 10:24pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/7 "2020-09-16T22:24:55Z")

</div>

> [@cmallonee](#):
>
> I would try
> 
> ```auto
> . ia_table__rowGroup{
> height: 45px;
> }
> 
> ```

No luck, I also tried `ia_table __body__ rowGroup`

> [@cmallonee](#):
>
> If you’re not seeing these changes take effect, are you perhaps running into a caching issue?

Still not seeing them, even with a cleared cache, shift + f5 session, and a restarted designer

> [@cmallonee](#):
>
> Additionally, if you inspect the rows in the browser, are you seeing the setting in place? Is it being overridden by anything?

It looks like it says the height is "unset", and if I change it to something like 80px, then it dissapears  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5e2fc5fddd741d75a890bc2cda05e0a37f35e18.png)

> [@cmallonee](#):
>
> `ia_table__rowGroup` .

Separately, do you get this from the div class? I always wondered where you found these names...

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 16, 2020, 10:29pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/8 "2020-09-16T22:29:40Z")

</div>

> [@kgamble](#):
>
> I also tried `ia_table __body__ rowGroup`

`.ia_table__cell` does work, however it also changes the height of the row header, which I dont want.

I tihnk this goes along with how changing `props.cells.style.height` works, but changing `props.rows.style.height` does not work. That feels like unintended behavior, however there may be a reason for this that I dont know.

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [September 17, 2020, 3:39pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/9 "2020-09-17T15:39:48Z")

</div>

You’d want something like this in table.css, or anywhere for that matter. Use it carefully though, I’m not sure how this will affect the other table features and tables. Good luck!

```auto
.t .tb .tr {
    min-height: 45px !important;
}

.t .tb .tr-group {
    min-height: 45px !important;
}

```

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 17, 2020, 3:58pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/10 "2020-09-17T15:58:23Z")

</div>

> [@ynejati](#):
>
> .t .tb .tr

Awesome thank you both!

Quick question, will the individual class objects like this used for theming ever be documented, or will it always be up to the user to check the class of whatever they are trying to manipulate? As well, do these class names risk being changed in future updates?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 17, 2020, 6:46pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/11 "2020-09-17T18:46:37Z")

</div>

> [@kgamble](#):
>
> Quick question, will the individual class objects like this used for theming ever be documented, or will it always be up to the user to check the class of whatever they are trying to manipulate?

There are FAR too many to document in any digestible way, so there is no plan to document them. Also, a "simple" documentation could actually be dangerous because this is an advanced feature; documenting something like `.tr` with the expectation that a user would know ALL of the places the "tr" class is in use would be preposterous (as would updating the documentation whenever we make the smallest change).

Suppose we documented `.tr` as a class, and a user decides that simply knowing about the existence of `.tr` is enough to modify their CSS files. They might just be trying to change their table, but now they've modified their Tables, Alarm Journal Table, Alarm Status Table, and Easy Chart with a style change.

It's sort of like "with great power comes great responsibility" - but we're electing to allow users to learn how to use the power through experience before we give them superpowers and let them loose in the city.

> [@kgamble](#):
>
> As well, do these class names risk being changed in future updates?

There's a small chance during major version changes, because we take that as our opportunity to institute changes which might break APIs/scripts/custom modules. I can't think of anything like this that changed for 8.1.0, so you're safe until at least 8.2.0.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 20, 2020, 6:06am UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/12 "2020-09-20T06:06:45Z")

</div>

While you’re here, do you know if it is possible to allow `basis: auto` to take a tables rows into account? It currently doesn’t and I don’t know if it’s a bug, or a technical limitation due to the way the table is implemented.

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [September 22, 2020, 2:37pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/13 "2020-09-22T14:37:23Z")

</div>

On the table itself as a flex item? Not unless you switch it to non-virtualized. When virtualized, the body will fill with rows based upon the available space, and some. So, the rows do not give the body internal dimensions. If you switch to non-virtualized, which is just standard rendering, the rows do give the body internal dimensions. If you employ pagination and keep the rows per page below 1000, possibly 500 (you’ll have to play around with it), rendering performance should be okay. I suppose that is what you’re running into.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2020, 2:55pm UTC](https://forum.inductiveautomation.com/t/perspective-table-row-height-in-theme/38758/14 "2020-09-22T14:55:13Z")

</div>

> [@ynejati](#):
>
> Not unless you switch it to non-virtualized. When virtualized, the body will fill with rows based upon the available space, and some. So, the rows do not give the body internal dimensions. If you switch to non-virtualized, which is just standard rendering, the rows do give the body internal dimensions

That is exactly what I need! Realistically, there wouldnt be a need for the basis to be auto when the table is greater than the size of the device, but when you are using small tables to display only a few things this is perfect. Thanks @ynejati!