How do i get the content of the Tab (IFRAME) to scroll, on an iPad, works fine on pc (even Mac), but when viewed on an iPad, the entire UI sort of goes up and down with your finger.
I have the Layout attached the BODY, and split left-right, on the right, are the tabs, they scroll and work very nicely but not on an iPad.
Hi, issue is not directly related to the DHTMLX, it is specific of iframes scrolling on ipad
You can add the next css style to the parent container
-webkit-overflow-scrolling:touch;
Hi Stanislav,
Phew… what a week, i have been trying every device and PC i can get my hands on!
So for the sake of the Forum, and to assist others who find this. I fixed it after following a lot of posts, pointing me in the same direction as you. (One of the biggest problems was actually that developing on an iPad is very annoying, as you don’t have your neat debugging tools, and you are basically never sure if your changes are in fact published or not, anyway.)
You are right, to use the:
-webkit-overflow-scrolling: touch;
But, this will NOT make it work, and as the Google results say, you also have to add:
overflow: auto;
Then you will notice that this creates a double scroll bar, there is a space at the bottom (about 2 or 3 pixels) that forces the scroll bar to appear, even tho you have the DIV around the IFRAME with a specific px size, and the only content inside it is the single IFRAME set to width and height of 100%. Theoretically this should not create any scroll bars, but there is something to do with white-space and blah-blah its too long to get into now, but the solution is to float the IFRAME. Again, it doesn’t sound like it should be necessary, but hey… there you go, the IFRAME will now sit inside the DIV, and not put on the extra scroll bars.
Final Solution:
.dhxtabbar_base_material div.dhxtabbar_tabs_top div.dhx_cell_tabbar div.dhx_cell_cont_tabbar
{
border-width: 0 0 0 1px !important; /* I used this, you don’t have to */
-webkit-overflow-scrolling:touch !important;
overflow: auto !important; /* This is actually what you are scrolling on the iPAD */
}
.dhxtabbar_base_material div.dhxtabbar_tabs_top div.dhx_cell_tabbar div.dhx_cell_cont_tabbar IFRAME
{
float: left !important; /* Prevents double scroll bars */
}
This solution works for PC Browsers, and for all iOS Browsers.
I tested:
PC: Safari, Chrome, Firefox, and Edge
Mac: Safari, Chrome, and Firefox
Android: Safari, Chrome, Firefox, and Edge
iOS: Safari, Chrome, Firefox, and Edge
All worked - there was one scroll bar on Desktop versions, and no scroll bars on the Mobile versions, but you are able to scroll correctly.