How to adding margin/padding to bottom of table?

Tags: #<Tag:0x00007efc6454bc50>
#1

So, I have the grid setup and working correctly…where I have the grid take up a fair amount of space on the webpage. When you scroll down the grid to the bottom, you end up at the very bottom of browser…and so adding rows here is awkward, as there is no space.

I want to make it so when you scroll to bottom of grid, there is space/margin so the user can enter data more comfortably that at very bottom of page. Initially I solved this by adding in like 5 sparerows…as this adds in the type of padding/margin I want, but the sparerows is causing other issues I want to avoid. Ultimately, I just want to add margin so when you scroll to bottom of grid, there is still 200-300 pixels of space between bottom of grid and browser.

How can I accomplish this without using the minsparerows?

#2

Hi @mhennessy7

Would settings up a fixed height for the table work? You can set up a dynamic height to expand to some predefined value and then add a scroll if the number of rows is more. Does it sound like a good plan?

#3

So, I am currently setting the height of the table dynamically…so that it sits/expands on the page and just leaves space for the bottom nav bar which shows the total records. Here is a screenshot of what I’m trying to do. In this example, there are hundreds of rows…so the user scrolls to the bottom of the table. I have 1 minsparerow added, but it’s too close to bottom. The highlighted area is what I’d like to be blank space…so when the user scrolls to the bottom of the table…there is that extra margin/padding so the row they are filling in is not at the very bottom of the page.

As mentioned, adding 5 minsparerows adds that space, but it causes other issues for me…so if possible. I’d rather the padding is added to bottom of table when they reach the scroll bottom.

Does that make sense?

image
image.png1597×399 90.2 KB

#4

Hi @mhennessy7

Do you mean adding a padding to the container at the bottom like here https://jsfiddle.net/ng6rx2y5/3/
If that is not what you planned please share more details.

#5

yes, it should be that simple, but for whatever reason, it’s not working on my table. If I add padding to left, right or top…it works, but adding padding to the bottom is ignored…can’t understand why.

#6

In the JSFiddle we have a simple construction of the DOM. Maye in your example some parent containers have specified CSS settings that interact with that padding.

#7