DataTable horizontal scroll not permitting to scroll to end of table
DataTable horizontal scroll not permitting to scroll to end of table
Gabriel23
Posts: 33Questions: 8Answers: 0
I am using DataTable horizonal and vertical scroll as follows:
"scrollY": "410px",
"scrollX": true,
"scrollCollapse": true
But I am not able to scroll down to see all data's in table. I am barely able to scroll down and see half the data that is in table. Any ideas how could I can make it work ?
This discussion has been closed.
Answers
Hi @Gabriel23 ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
I know but it is very difficult to take a whole page from a project and put it in test case as It would imply copying multiple files ..
@colin
Could you provide some info about what could be wrong? at what would I have to look in order to get it fixed , as I tried I saw that I succeded in having vertical scroll till the end if I lower the scrollY to about 50 px which in case of a bigger screen ( what I want to achieve now is for mobile ) won't look right
Hi @Gabriel23 ,
Without seeing it, it's hard to tell - for example, this here works as expected. As I said, if you could create a test case that demonstrates the problem, that will give us something to look at. Without that, we're just speculating...
Cheers,
Colin
@colin
Well that example is not working as I already tried it...Will try to handle on my own but thanks for you time
You don't need to copy everything for a test case. If needed you can mock the data. The purpose of the test case is to show the problem you are having not the full solution. Many times when building up the test case a person may actually find the problem.
You have posted 3 lines of your config. Since each environment is different its hard to say what the problem could be. I took your code snippet and put it into this example:
http://live.datatables.net/hohoremo/1/edit
I had to add
paging: falseto get the vertical scroll to show. Or with paging on the scroll height could be made small,"scrollY": "200px",for example. Please try to update my example or build your own so we can see the problem.Kevin
As I said I see no easy job to replicate the error on a default template, I am pretty convinced that is about putting a default size to scrollY, I think dataTables calculates amount of scrolling like it would be in the maximmum size, that would be a table with in my case, 410px height, and then would calculate how much I can scroll till bottom of table reaches, but in smaller sizes, you need to scroll more to reach end of table , but as dataTable is thinking that table body size is 410px then I can only scroll till a random value based on the body height ( scrollBody max height which is scrollY to be more specific)
What part of that example isn't working for you? That might give some clues.
@colin I will try to be clear. Scrolling on a normal browser size works just fine , nothing wrong everything works as expected. Now I have to make it look decent on mobile phones , that implies low width and height for table. Horizontal scrolls works fine, I can scroll from one end of table to another but vertical scroll is not allowing me to scroll to end of table, however I can still use scroll but is just like I can not reach end of table , half of my data in table can't be seen. A side note is when I am scrolling, header is fixed and only part is vertically scrolled is tbody.
I just tried that page on my mobile (Android/Chrome) and both vertical and horizontal scroll is working as expected. Can you give explicit steps that would demonstrate your problem with that page.
Ok seems now I found one more issue , gonna have serious troubles working with mobiles as I get everything working for desktop and then comes mobile and everything is screwed. I don't know what kind of steps shall I give you , I have a div with a class of container-fluid inside a div class row inside a div class col-md-7 col-md-offset-2 with a style overflow auto and then here comes the table with a class of table and width 100% , in css when I am on mobile I have css that gives to my table tbody a height 100 vh and overflow auto and also height 100 vh to a div with id wrapper that is inserted in the div class row mentioned above and everything mentioned after the div class row is inserted in the div wrapper
@colin Also now when I am introducing new data ( I have filters outside table , making a new ajax call which results in different data ) the data inside columns is wrapped to multiple lines instead of just making the column bigger, I had same problem in normal resolution while I still had autowidth true to all columns but fixed by adding autowidth:false to table itself ( where you also defined scrollX for example ) but it is not working for mobile..
As we said, without seeing the issue, it's hard to make recommendations. You suggested you were experiencing problems with the link I gave you, and that would've helped. If you can reproduce on any of those pages, that would help - but we're not seeing any issue with mobiles - and without seeing it, it could be anything.
Are you using the FixedHeader extension?
If so the docs state this:
Kevin
No I am not using FixedHeader and now I did explicitly type fixedheader to false but same output , I will just start from a blank page and see if it works and then I will add classes one by one and see where the problem really is
@colin I don't know if that gives you any hint but , I have a div with a class of dataTables_scrollBody and this div takes the height of the amount of pixels I type as parameter to scrollY. Well that been said if I increase the size of the scrollY and so implicitly the size of dataTables_scrollBody height means the dataTable body's in theory is bigger so less scroll is needed to reach end of table , so that reflects in a less amount of scrolling , moreover if I decrease the height when it is around 50 I manage to reach the end of table , however that doesn't seems to me a right fix, do you have any ideeas?