I made an example here:
http://secure-wildwood-74891.herokuapp.com/
That page has two iframes. The content in both of them, if opened in their own tab, in a window 414px wide (iphone 6s) will respect that width and render a responsive view.
That isn't happening in the first frame. The content is rendering as if the browser is significantly wider than what the iframe is set to (400px wide).
The iframes both have scrollable="no" set already.
So, how do I make the content of the top one properly respect it's parent window size?
Related
I have an iframe that is responsive, but sized differently on smaller (mobile) screens. On larger screens it's the common responsive iframe where it scales proportionally to fit within the container using the padding-top %. And on smaller screens the container becomes 80vh height, 100% width. The iframe content then has it's own horizontal slider (which will also eventually be gryo controlled).
It all works fine on desktop browser, and other devices (bunch of Androids) but not on iOS. The iframe still fills the height correctly but doesn't max out at the container width. Instead it keeps original proportions and becomes wider than its container.
Not the easiest to explain in words, so:
Screenshot on Android device
Screenshot on iPhone
Live demo
View it on desktop and resize the window it actually does exactly what I need, including once you get down to smaller mobile size. Or load it on an Android device (I'm using BrowserStack). You'll notice the iframe width stops at the container bounds, and you get the scroller within the iframe.
But on iOS (iPhone) it's not doing that. Instead the iframe just extends out beyond the container bounds, and the parent page becomes horizontal scroll.
Any help appreciated.
UPDATE:
Found a semi-related post that suggests adding the following CSS for the iframe element
width: 1px; min-width: 100%; *width: 100%;
It didn't do the trick for me, however when I add that to the body element of the iframed content (which I also control), it resolves the issue.
I have a bootstrap model inside a div. I want to show a sign up form in that model. I don't want to extend the page beyond the viewport of the browser whether the browser is opened in a 15+ inch screen or a 13+ inch screen. In short I want to show the model to all the users on any screen size so that the they don't have to scroll the page to get the full content of the sign up form.
Try giving the div a max-width.
On some mobile devices such as iPhone 5C my tables on my web page are half way off the page. How can I change that so my page width will not get any smaller than the minimum width of my table with CSS.
I have tried shaving as much space as possible but I can't seem to make my tables any smaller for mobile.
(mobile site [go to bottom of the page and select mobile version]) http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
Tables in question are in the tabs. Try resizing the page width in your browser as small as possible and you will see the problem.
As you can see in the image page is able to resize past tables minimum width.
This prevents the table content from bursting beyond the confines of its parent container, as in your screenshot.
#upgrades-datatable_wrapper {
width: 100%;
overflow: auto;
}
Screen sized to about 300 pixels
There are two site templates, on the desktop (which is already ok) and mobile.
In Mobile, I want it displays ONLY an image occupying the entire screen. ALL the extension (height and width) of the display has to be just this content. After I press a button, the page down and displays the content.
Exemple:
I make a example in Fiddle jsfiddle.net/gtw7375/yrmbsfhu/
But I do not know how I can center the image and leave it as unique content occupying the entire height / page height.
How to do this?
Create a block element that is set to 100vw and 100vh. Then add the image as a background-image with the property: background-size: cover.
It is a common question to resize an iframe to fit its' content, however I want instead to set the content to fit specific dimensions.
Essentially my application captures HTML, along with user_1's screen dimensions. So that user_2's sees the same HTML and screen dimensions.
In cases where user_1's screen dimensions are larger than user_2's screen dimensions, user_2 would see an iframe with a horizontal scrollbar. In cases where user_2's screen dimensions are smaller than user_2's screen dimensions, user_2 would see an iframe without a horizontal scrollbar and centred content.
Taking into account things like media queries where smaller screen resolutions add for instance a burger menu. I'd like for the second user to see the same thing.
What effectively I'd love to do is set the iframe's inner scrollWidth.
The only thing I've been able to suss out is that setting the actual width of the iframe itself is the best way to start. Then perhaps in cases where the content needs to expand beyond the width of the iframe, to set the width of the html or body element inside the iframe.
But that too, introduces media query issues. Where maybe the iframe on user_2's screen is small enough to trigger a burger menu, even though the body's width was set to expand beyond the iframe's width.
Is there any way I can set the iframe to be any width I want, but for the content of the iframe to behave as though the iframe was larger? I hope I've explained my problem in a way that makes sense.
I want user_2 to see the same thing user_1 saw.