Table row height customization

[Havock94]

Hi, I think it would be useful to allow changing the table row height.

I found that the height is controlled by the variable
--row-height

which is set on the table wrapper element.
I tried overriding the variable through the table Custom CSS, but the CSS is applied to the wrapper parent, therefore the variable is not overridden.

Do you think it would be possible to allow changing the height? (By either setting the variable on the table element so that Custom CSS can be used, or supporting it in the Settings UI)

I'm making an app where I track movies and shows that I should watch, and at the moment the shows covers are quite small

This is the effect I would like to achieve :)

[melohagan]

Great idea!

Thank you for the detailed description and the effort find a CSS solution. As you rightly stated, CSS is only inline at the moment.

I've created a feature request here: #5476

[NicolasFabre81]

Hello @Havock94 , how did you manage to override the row height ?
I tried --spectrum-table-cell-text-line-height : 60px !important; --row-height : 60px !important;
but it does not override the row height

[melohagan]

You can set the row height for the Grid block if that's an option? https://docs.budibase.com/docs/grid-block#row-settings

[NicolasFabre81]

I'd prefer to remain on a standard table... there should be a way using css no ..?

[melohagan]

There should be. It would need a bit of tinkering though. You can right click on the table and inspect to see the CSS that you would need to edit.

[Havock94]

@NicolasFabre81 I'm not following that particular project anymore so I don't remember the exact rule I used.
From what I remember, it couldn't be done from the table itself though, because the variables were defined on a wrapper up the DOM tree.

[NicolasFabre81]

Yes I'm currently tinkering, it works if I update the CSS in the browser but not with me designer custom CSS. Tried : .spectrum-Table-row svelte-rzhjll{ --row-height:20px !important; } .spectrum-Table-row { --row-height:20px !important; }

…

--row-height:20px !important;

[melohagan]

I don't think you should be using --row-height. That's a CSS variable.

Did a quick test. Try this in an embed component:

<style>
.spectrum-Table-cell {
  height: 20px !important;
}
</style>

[NicolasFabre81]

Great thanks it works !

[AlejandroFNadal]

Tiny extra thing: adding here height: auto !important works even better, because it just takes whatever the height of the children of each cell is.

[melohagan]

The new table table component allows you to set a row height 👍

https://docs.budibase.com/docs/table#row-settings

[AlejandroFNadal]

Thanks for the info
Sadly, we are not updating further than 2.17.6 for a few months. We have
cloned the VPS where our budibase instance is running and we will
eventually perform an update there, and then we will get that feature as
well.
The upgrades have proved way too unstable for us. Stuff always gets broken
on each upgrade (last time, I had to manually relink all data providers in
a ~50 page application because they all went to "None" after the update).
(Not complaining, you guys are doing a great job, I imagine it is just way
too hard to test all the possible crazy user cases)