This is a very specific issue I am seeing, and I have a workaround, but I wanted to see if there is a better way. I am using IGGrid and displaying a set of data and everything is working fine on a normal pc in Firefox, Chrome and IE. But when I try it on a Surface Pro 2 device, the Firefox browser keeps setting the overflow to hidden(Chrome and IE are fine.). This is a problem because then the users cannot see all of the data in the grid because they cannot scroll and there is no scrollbar. I have a workaround in that I added #objectid{ overflow: auto !important;} to my site.css file, but I do not like having to do this. Is this a known issue, is there a better work around?
Hello Jonathan,
Thank you for sharing your solution on this matter with us and everyone that can face it in future.
I just wanted to clarify the specific css I am setting.
#grid1_scroll{ overflow: auto !important; }
Sorry for the delay in my reply, I have been busy.
The CSS class is only setting the background color, the purpose is to set the color based upon the given conditions.
The body style is actually a mistake on my part, it was my attempt to force the scroll bar to appear. I have since removed it from my code.
I am not a huge fan of explicitly setting the size in Pixils because there is no way to know the target devices screen size. I can check if doing that does fix the issue, but given the option between setting the size in pixils or overwriting the objects css I will overwrite the css. Again, the issue is that somewhere the overflow is being set to visible or adding the following to my css file would not work, and it currently does solve the problem for me.
#objectid{ overflow: auto !important;}
Hello,
I'm just checking if you have resolved your issue. If there is anything that I could help you with, please let me know.
Thank you for your patience!
I have investigate this matter further and some questions appeared. Could you please tell me what you are trying to achieve with setting body style to overflow hidden (I understand that you don't want to show the page scrollbar), also what is this css class that you are applying on grid data rendered, although it may not be relevant to the issue.
If you want to show the scrollbar of the grid, with overflow of the body set to hidden, you need to specify its height in pixels not in percentages or to specify the splitters height in pixels not in percentages (see the sample) and leave the height of the grid to 100%. The use of percentage heights is causing the issue.
I have create a sample in order to achieve the issue with the scrollbar. Could you please send a screenshot relevant to the issue in order to clarify it.
Looking forward to hearing from you.