Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

Get help for TinyWebGallery, the best image gallery. The forum is also home for the Joomla JFUploader, TWG Flash Uploader and the Wordpress flash uploader.
It is currently 28. Mar 2024, 20:37

This forum is readonly now. Please use the new forum if you don't find the answer to your question here. The new forum is at https://www.tinywebgallery.com/blog/forum/


All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: 22. May 2019, 04:46 
Offline

Joined: 20. May 2019, 22:01
Posts: 3
I'm running into an issue where iframe content width is wider than the screen on iOS, but also on Android.

The test URL is:
https://peoplesbanktheatre.com/events/tickets/?EventId=1001

After landing on this page, click "Book Now" to see the problem screen. On iOS, the text fails to wrap, and the image below the text exceeds the screen width. On Android, the text wraps, but the image still exceeds the screen width. Screenshots:

iOS:
https://peoplesbanktheatre.com/wp-content/uploads/2019/05/IMG_8141.png

Android:
https://peoplesbanktheatre.com/wp-content/uploads/2019/05/IMG_8208.jpg

The shortcode for this page is currently:
[advanced_iframe id="SpektrixIFrame" src="https://system.spektrix.com/peoplesbanktheatre_run1/website/EventDetails.aspx" height="1500" name="SpektrixIFrame" frameborder="0" enable_responsive_iframe="true" onload_resize=”true” url_forward_parameter="ALL" onload="window.parent.parent.scrollTo(0,0);" ]

Debug mode is on.

Please note: I do also have access to change the CSS of the iframe source URL, if that helps.


Top
 Profile  
 
PostPosted: 22. May 2019, 05:19 
Offline

Joined: 20. May 2019, 22:01
Posts: 3
As I continue to work on this, I was able to to resolve the text wrapping on iOS by adding "scrolling=no" to the shortcode and the following to the parent site CSS:

#SpektrixIFrame {
width: 1px;
min-width: 100%;
*width: 100%;
}

However, the seating plan overview image is still larger than the width of the iFrame on iOS.


Top
 Profile  
 
PostPosted: 22. May 2019, 06:15 
Offline

Joined: 20. May 2019, 22:01
Posts: 3
I was able to get the image to fit with the following style applied to the image vai the iFrame URL's CSS:

transform: scale(0.75);
transform-origin: left;

Probably not the most elegant solution overall, but it seems to do the trick for now.


Top
 Profile  
 
PostPosted: 22. May 2019, 22:43 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
are you using the free or the pro version?

because enable_responsive_iframe="true" should actually add
width: 1px;
min-width: 100%;
max-width: 100%;

I checked you code and this does overwrite your #SpektrixIFrame

about the image. maxbe adding max-width:100% there is also an easy fix.

Best, Michael


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: Bing [Bot] and 12 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
cron
powered by phpbb | Datenschutz/ Privacy policy