[Pro] iframe and mobile

Keith_Henshall · February 10, 2014, 6:27pm

I am using iframe to link to a page of event dates (that I shall eventually link to a MySQL database).

When viewed on my laptop, that works fine. On iPad, the list flows out of the frame.

How do I limit the size of the frame on mobile devices?

Appreciate any advice.

test.henshallcentre.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · February 10, 2014, 9:45pm

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame

<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Keith_Henshall · February 10, 2014, 10:52pm

Thanks, David. I’ll give that a try tomorrow.

Keith

On 10 Feb 2014, at 16:45, DeltaDave email@hidden wrote:

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame

<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Keith_Henshall · February 11, 2014, 4:03pm

David,
That didn’t seem to work.

Just to check I haven’t done anything dumb:
I went to Page>HTML Markup>Before and entered:

#item8 { -webkit-overflow-scrolling: touch }

The item that has the iFrame action applied to it is, in fact, called item8. (I also have overflow on item12.)

Did I get something wrong?

Appreciate your help.

Keith

On 10 Feb 2014, at 16:45, DeltaDave email@hidden wrote:

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame

<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 11, 2014, 4:08pm

-webkit-overflow-scrolling does not do anything for iframes. It only governs HTML elements that have their overflow style property set to auto or scroll.

Walter

On Feb 11, 2014, at 11:03 AM, Keith Henshall wrote:

David,
That didn’t seem to work.

Just to check I haven’t done anything dumb:
I went to Page>HTML Markup>Before and entered:
#item8 { -webkit-overflow-scrolling: touch }
The item that has the iFrame action applied to it is, in fact, called item8. (I also have overflow on item12.)

Did I get something wrong?

Appreciate your help.

Keith

On 10 Feb 2014, at 16:45, DeltaDave email@hidden wrote:

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame
<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>
David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Keith_Henshall · February 11, 2014, 4:33pm

OK Walter, I see.

So any clues as to how to solve my overflow problem?

I am using iFrame to link to a page of event dates (that I shall eventually link to a MySQL database).

When viewed on my laptop, that works fine. On iPad, the list flows out of the frame.

I could really use some help. The site is at test.henshallcentre.com

Keith

On 11 Feb 2014, at 11:08, Walter Lee Davis email@hidden wrote:

-webkit-overflow-scrolling does not do anything for iframes. It only governs HTML elements that have their overflow style property set to auto or scroll.

Walter

On Feb 11, 2014, at 11:03 AM, Keith Henshall wrote:

David,
That didn’t seem to work.

Just to check I haven’t done anything dumb:
I went to Page>HTML Markup>Before and entered:
#item8 { -webkit-overflow-scrolling: touch }
The item that has the iFrame action applied to it is, in fact, called item8. (I also have overflow on item12.)

Did I get something wrong?

Appreciate your help.

Keith

On 10 Feb 2014, at 16:45, DeltaDave email@hidden wrote:

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame
<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>
David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 11, 2014, 4:53pm

If you place the iframe inline rather than layered, then when the iframe expands to show its content (which happens on MobileSafari, not sure about WebKit on Android) it will just stretch the surrounding HTML element to fit. I don’t know of any way to overcome this feature, which is there to provide better usability for touch users. Currently, you’ve stacked the iframe above other elements, and they are just as if they were on separate sheets of glass – one changing size won’t affect any other.

Walter

On Feb 11, 2014, at 11:33 AM, Keith Henshall wrote:

OK Walter, I see.

So any clues as to how to solve my overflow problem?

I am using iFrame to link to a page of event dates (that I shall eventually link to a MySQL database).

When viewed on my laptop, that works fine. On iPad, the list flows out of the frame.

I could really use some help. The site is at test.henshallcentre.com

Keith

On 11 Feb 2014, at 11:08, Walter Lee Davis email@hidden wrote:

-webkit-overflow-scrolling does not do anything for iframes. It only governs HTML elements that have their overflow style property set to auto or scroll.

Walter

On Feb 11, 2014, at 11:03 AM, Keith Henshall wrote:
David,
That didn’t seem to work.

Just to check I haven’t done anything dumb:
I went to Page>HTML Markup>Before and entered:
#item8 { -webkit-overflow-scrolling: touch }
The item that has the iFrame action applied to it is, in fact, called item8. (I also have overflow on item12.)

Did I get something wrong?

Appreciate your help.

Keith

On 10 Feb 2014, at 16:45, DeltaDave email@hidden wrote:

Try the following added into Page>Html Markup in the before section where item8 is the name of the Div that holds the iFrame
<style type="text/css">
#item8 {
-webkit-overflow-scrolling: touch
}
</style>
David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · February 11, 2014, 10:44pm

Hi Keith

I am using your 2 iFrames on this simple example page- can you have a look with your iPad and see what you get.

http://www.deltadesign.co/FW6Test/frames.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Keith_Henshall · February 12, 2014, 3:24pm

David,
That’s exactly what I want. How did you achieve that?

Keith

On 11 Feb 2014, at 17:44, DeltaDave email@hidden wrote:

Hi Keith

I am using your 2 iFrames on this simple example page- can you have a look with your iPad and see what you get.

http://www.deltadesign.co/FW6Test/frames.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · February 12, 2014, 8:55pm

OK Keith - assuming that your 2 iframes are in the the containers item8 and item12 try adding the following in Page>Html Markup in the before slot

<style type="text/css">
@media screen and (max-width:928px) {
#item8, #item12 {
overflow:scroll !important;
-webkit-overflow-scrolling:touch !important;
}
	}
</style>

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options