Dynamic Table Height

  • 1
  • Question
  • Updated 11 months ago
  • Answered
Does anyone have some sample CSS to share where you have successfully rendered a table's contents dynamically based on the browser window size? 

This would be identical to standard Salesforce list views. If you display 200 records and re-shape the window, the amount of table rows visible becomes more or less but the bottom of table always remains 100% in view. 

Full browser window:


Resized window: Number of rows visible is less, but the table bottom is still in view. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
There is a setting on the table of "allow scroll bars". You can put the table in a wrapper component and set the wrapper component height to something like 90VH . This will adjust the height with the height of the screen.
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
I wish it were that easy, but that doesn't work as expected unless I am missing something. Resizing the window while using a wrapper with a set VH keeps the height of the original window before resizing. It is not dynamically keeping the entire table in view based on window size. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
Resurfacing this. Does anyone have a clue how I can get these containers to stick to the bottom all the while adjusting accordingly. 
Photo of Craig Regnier

Craig Regnier

  • 134 Points 100 badge 2x thumb
You could probably do something like:
.table-wrapper {
max-height: calc(100vh - 100px);
overflow:scroll;
}
Where the 100px is the combined height of your header/footer, assuming they're not dynamic.
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
Thanks a ton! This has bothered me for months!

For anyone curious (my use case solution):
I put my table component in a wrapper component w/ the following properties:
.table-wrapper {max-height: calc(100vh - 144px); overflow: hidden;}

Then I added the following properties to my table component via the table id:
#sk-37_fTl-194 .nx-editor-contents {height: calc(100vh - 254px) !important}

The table now fits snugly at the bottom no matter what size screen is being used.