Header Will Not Scroll Horizontally
burgoyne opened this issue · 7 comments
I almost have this setup exactly how I need it. The final step is adding the ability for horizontal scroll. I can horizontally scroll my table, but the header will not scroll with it.
I set this fiddle up similar to my actual table. If you reduce the window size so it is small enough to require scrolling, you will see that the table scrolls but the header does not.
https://jsfiddle.net/e4zcy3x7/2/
I originally thought it was because the table that is generated by floatThead (for the header) was being generated outside of my container (the container for scrolling is class="table-wrap"). But then when I setup this fiddle, the newly generated table is inside the container, but the same issue exists. So it must be something else.
Has anybody else run into this issue before?
I see now that I need to use responsiveContainer.
Is it possible to have the table inside a vertical and horizontal scrolling div? My table could potentially be quite large, and I am trying to not have the entire table visible on the page (hence the scrolling). My main issue is that it can also be quite wide, which is why I need horizontal scrolling.
You are right, you needed responseContainer. Since i couldnt get your table to have horizontal scrollbars I had to resize the window to be very narrow. Is that your use-case?
This seems to make everything work with that narrow window:
https://jsfiddle.net/bjf1uygz/
Am I missing something? If you need something else to work, can you update your fiddle with what that something else is?
Ignore everything I said above. its wrong.
I assumed that you were using bootstrap responsive tables, but you are not. You just happen to cause the conditions that mimic bootstrap responsive tables. That is:
- Your horizontal scroll bar is on the table wrapper
- Your vertical scroll bar is on the window
But you said that you don't actually want that and this is good! What you want is a regular table inside of a div with overflow in it.
I cleaned up some of your code a bit too:
https://jsfiddle.net/bjf1uygz/6/
Also you will have a better time initializing this plugin after the tab is shown and not on page load like you do now.
The plugin needs to initialize when widths of elements can be calculated, so it will wait to init if it finds itself in a hidden div and then try to init when shown, but sometimes that is too late and looks janky.
Solved, I think.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.