How to prevent Knack table scroll inside of a scroll

Help Center Get Answers
1

I have a couple Knack tables on pages in my app.

I want to display the entire height of the tables, and not have the scroll bar on the side. 

Right now, on a page, I have the main scroll bar on the right side of the page (normal), then I have a scroll bar on the table. I don't want the table to be scrolling. I want it to show the full table height, no matter how many records are set to be shown at a time.

Is there a way to set this globally, or am I going to have to apply css to every table that I put in my app?

 

2

Thanks a lot... 

3

Oops, I noticed this morning that some of our larger tables are flowing off the page on the right without any way to scroll horizontally. So I changed the overflow to auto, and now it's working perfectly. Thanks again, Waylon!

4

Thank you, Waylon Milner! That worked like a charm! 

5

Thank you for this 8965441168!!!

6

that's fabulous! done!! thank you Waylon

7

Works great, thank you!

8

I have been dealing with the same issue. I think I figured it out. Apply the following CSS in your builder and it should work. 

 

.kn-table-wrapper {
overflow: visible;
}

.kn-table-wrapper.is-constrained {
max-height: 100%;
}

 

I am using the new theme. You may need different css if you are still using the old theme.

1 Like
9

Hi Jason,

I also have a lot of user complaints about what they call " Scroll within a Scroll".

Right now I was able to fix this by going back to the Legacy Design. You can select this under Live app design in the App settings section.

I tried to play with the CSS but couldn't find the correct properties to change, I tried playing with the overflow property without success.

10

Just refreshing this old thread - I have the same problem now, and even after putting that css into my app it is still showing tables with scrolling within scrolling which I really want to avoid. Is there any other code, perhaps for the new app design?

Thanks!

11

I’ve found the same and after trying a number of options, I have just choose “Full Width” vs “Max Width” in the settings.

12

Thanks for the reply - I’ve tried both settings and doesn’t seem to remove the vertical scroll within a scroll which is really frustrating. I just want the table to be as long as it needs to be to contain all the info.

13

What I understand your looking for is precisely what adjusting that setting does within my apps.
Is this page a full screen page, or within a modal pop-up?

14

It’s in a full screen page - I tried using either of the full screen / max settings and saving it and nothing seems to change for me?

15

Not knowing anything much at all about what I was doing I tried many things to no avail but this 1 change to the overflow type seemed to work:

.kn-table-wrapper {
overflow: hidden;
}

.kn-table-wrapper.is-constrained {
max-height: 100%;
}

1 Like
16

Hi - refreshing this thread, because unfortunately @Dean2 that bit of code doesn’t seem to have worked for me - the scroll is still there. I just pasted that into the CSS bit is that right?

Any other suggestions? It’s quite frustrating!

Thanks

17

Michael

Frustrating is an understatement.

I deleted the code to check and see if did work and the scrolling returned. So, I added the code back and the scrolling remained !@#$

After 2+ hours of my non-coding trial and error I did come up with a solution thanks to another of Carl Holmes’ tutorials. Sadly, it will be on a view by view basis. The code which returned my page back to the way I wanted it to look and perform was simply:

#view_330 .kn-table-wrapper {overflow-y: hidden;
}

.kn-table-wrapper.is-constrained {
max-height: 100%;
}