I am working on DataTables. I need scrollbar at the top and bottom of my table. I have more than 25 rows and my table overflow.
Every time I need to scroll down for horizontally scroll the table
Top of table:
Bottom of table:
I solved this, by adding a max-height to the table, which is smaller than 100vh, so that there is a horizontal and a vertical scrollbar (Like in this Demo, when all options are activated: http://fixedheadertable.com/ ). But please notice, that you have to destroy the plugins and initialize a new fixed header table after resize.
Related
I have a normal prime Ng table which is scrollable vertically. However, if the screen size is too small, I end up with the normal page scroll aswell as the table scroll.
Is there a way around this? To make the table the size of whatever the screen is, with an infinite scroll. So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
Explanation
By default p-table stretches downwards infinitely, unless you limit it's height, in which case it will have a vertical scroll if there's more data than can fit within the height you set.
Moreover, if all your elements together on the page (including the table), don't fit the current view, page will also get it's own scroll.
E.g. I have a menu on top of the page, under it a card with other things, then a table toolbar, then the table, that's a lot of elements and they won't fit within the view, so page will get it's own scroll. Meanwhile your table has scrollHeight of 600px, yet you have data for 900px, it will get it's own scroll too. Boom 2 scrolls.
Fix You can fix it in a few different ways but it all comes down to the desired behavior/look of your page... when I had this prob I just removed height restrictions and let table expand downwards infinitely, it wasn't a problem because: 1- table was the last element of the page from top to bottom; 2- I had paginator to limit size regardless. So I ended up with only the page scroll.
Here a simplified version of what I got :
https://stackblitz.com/edit/angular-9-0-0-rc-1-scrollable?file=src/app/app.component.html
So for now, I have a horizontal scroll. The 1st left div (blue) is fixed and must not be affected by the horizontal scroll. Only yellow and pink divs are scrollable with horizontal scroll.
What I need now is to set a vertical scroll. This scroll must allow to scroll both blue and pink divs, the yellow one must be fixed, not affected by vertical scroll.
I don't know how to accomplish this.
My app use Angular 9. I've tried to set a vertical scroll in both blue and pink divs, and synchronise them together but it's not ok as there's a small time between the moment that user scrolls in a div and moment that the scroll is reported to the other div, and I need it to be seamless.
I tried with the cdkScrollable, same issue.
Also this page can contains a huge amount of data, latence is expected, so I cannot rely on scroll synchronization.
Any idea?
Many thx
So I have a table that has a lot of content in it. The problem is that we want to allow the user to be able to scroll horizontally on the table but, because of the amount of content, they have to scroll a lot to reach the bottom of the table to interact with the scroll bar. Is there a way in angular using a directive for me to achieve having the scroll bar for the table to sit at the bottom of the window/screen not the bottom of the table?
https://stackblitz.com/edit/angularjs-ngea1h?embed=1&file=home/home.html
My page has a fixed header, a fixed right sidebar, and an HTML table with each column having a set width (so that the table stays left of the sidebar). The table scrolls vertically, while the rest of the page remains fixed.
Each row has an expand button, which shows another row under it, with a bunch of images. This row may get very long, so the overflow needs to be hidden behind the side bar (already doing that). However, since I changed to the fixed sidebar paradigm, I am unable to scroll the row to the right without moving the whole table with it.
I will try to create a JSFiddle, but my app is an Ember/Bootstrap app, so may take a while to reconstruct in JSFiddle format. If you know the answer off-hand, please let me know.
is any chance to have a scroll bar element that I can move where I want on the page but to link with my scroll box? I have created my scroll box ready but I need a scroll bar that should to be moved on other place on page.
Try jQuery Scrollbar - look at Advanced Scrollbars Demo page - External scrollbar.
If you want to use native browser scrollbar (or do not like custom scrollbars), you will have to use two containers - one with your scrollable content and the second one - with scrollbar that attached to first container. Look at question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window