Perspective Table Row Height in Theme

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

.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?

Keith,

What Ignition version and what container 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

image

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

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? :sweat_smile:

1 Like

@cmallonee or @nminchin enters the chat

1 Like

I would try

. 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?

No luck, I also tried ia_table__body__rowGroup

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

It looks like it says the height is "unset", and if I change it to something like 80px, then it dissapears
image

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

.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.

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!

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

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

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?

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.

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.

2 Likes

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.

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.

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!

1 Like