Missing scollbar on iPhone and iPad within a cell (iFrame)

Suite and Optimus Suite 5
#1

Hi

I am using the DHTML library as framework for my new report website. Over this website, reports of a race can be accessed. On the left side of the page, I added the Accordion for having a menu, and on the right side the report is shown which you have selected in the left menu. The selected report itself is added to the Layout cell by calling:

dhxLayout.cells(“b”).attachURL(url);

You can have a look at it over the following URL (example):
myrcm.ch/myrcm/report/en/15707/133796

My problem is, that on iPhone and iPad the scrollbar within the iFrame is not show and therefore it is not possible to scroll within the iFrame (in all other browser it is working - event IE).

Can somebody give me a hint how I can solve this problem?

Thanks in advance.

#2

Hi,

that on iPhone and iPad the scrollbar within the iFrame

Yes, iframes are not scrollable in iOS. if you can not avoid using iframes in your app, you can try to apply the following css rules:

.dhtmlxLayoutSinglePoly .dhxcont_global_content_area div{
overflow: auto !important;
-webkit-overflow-scrolling:touch;
}
.dhtmlxLayoutSinglePoly .dhxcont_global_content_area iframe{
overflow: hidden;
}

#3

Hi Alexandra

Thank you very much for this solution. Works great now :wink:

#4

Hi Alexandra.

I have applied this solution.
It works on iOS Safari.
But the scrollbar is displayed in IE and Firefox.
Is there a way to avoid appearing the scroll bar?

#5

Hi, xamp
Could you provide us completed demo to test it locally on different devices?
You can send this demo on support@dhtmlx.com with link to this topic
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#6

That CSS solution does not work for me. Here is a working demo with that CSS in place…

web1.cmpro.net/public/demo1/index.html

Is there a solution for this? My iframes will be in windows and I will have many windows because it is a single page application. Each iframe window needs to be scrollable on iOS.

Thanks!

#7

Hello gfrobenius

Please change css a bit:

div.dhx_cell_cont_layout { overflow: auto !important; -webkit-overflow-scrolling: touch; } div.dhx_cell_cont_layout iframe { overflow: hidden; }

#8

Thanks. This caused two scroll bars to appear when viewing on a PC. So I adjusted the CSS so it would only apply to an iPad…

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { /* your css rules for ipad portrait */ div.dhx_cell_cont_layout { overflow: auto !important; -webkit-overflow-scrolling: touch; } div.dhx_cell_cont_layout iframe { overflow: hidden; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { /* your css rules for ipad landscape */ div.dhx_cell_cont_layout { overflow: auto !important; -webkit-overflow-scrolling: touch; } div.dhx_cell_cont_layout iframe { overflow: hidden; } }
So that works. But there is a bad side effect. I have many popups that appear in the middle of the screen. Before adding this they would appear in the middle of the layout clearly visible. But now, on an iPad if the screen does have scrolling, the “middle” is now far down out of view. So the popups appear but you cannot see them unless you scroll down. Not sure how I am going to fix that. Popups need to think the middle of the screen is the middle of the viewable area in the layout. Hope that’s clear. If you have any suggestions I’d appreciate it.

#9

So, we need updated demo with new issue to reproduce it locally. Please, attach it to the ticket

#10

Recently i stuck on the same step, by luck i found this thread and now code is working fine. Thanks