I'm working on a web page that has a frameset containing a horizontal split; a sidebar on the left for a menu and a content area.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Test</title>
</head>
<frameset border="0" cols="100,*">
<frame id="SideMenu" name="SideMenu" src="SideMenu.html" scrolling="no" />
<frame id="MainPage" name="MainPage" src="LongPageContent.html" scrolling="auto" />
</frameset>
</html>
In desktop browsers (including Safari), the frameset is set to the size of the viewport and a scrollbar appears for the long page content in the MainPage frame. In Safari on iOS, the frameset expands to the same size as the content in the MainPage frame, extending beyond the visible viewport.
I want the former behavior so that the page size remains the same as the viewport, regardless of the content in MainPage. I've fiddled around with the viewport meta tag, but adjusting the viewport does not modify the frameset behavior.
I know that Apple's iOS guidelines advise avoiding framesets since scrolling is more confusing (requiring two-finger scrolling in frames), but ditching the frames is not a great option.
The safari Web Content Guide states that this is normal behavior. The frame will expand encompass your content and you will not be able to scroll.
I am sorry, but you are going to have to ditch the frames.
You can either code the side Nav into each page (which is terrible) or put something together in PHP that will load the contents of SideMenu dynamically into a column.
AFAIK, <frame> and <iframe> two-fingers-scrolling behavior has been abandoned. Since iOS 4.X thoses elements are now resizing to their content's size.
As position:fixed; doesn't work either on iOS you can't block your SideMenu frame to let the rest scroll.
This library seems to provide an interesting workaround: http://cubiq.org/iscroll
Related
I have faced a weired behavior and I can not find what is the reason of this behavior. My websites have two different rendering when I resize the Google Chrome manually and when I check the website in the Device simulator (using developer tools).
Brief:
<html>
<body>
<div>
//Entire the codes here with no overflowed element
</div>
</body>
</html>
I have no styling on the width of HTML and BODY tags. The direct child of body is a DIV again with no styling on width (So it should cover 100%). When I resize the window manully the DIV covers 100% of the width of viewport but when I resize the window in device simulator (developer tools), the child DIV is being shrinked faster than the viewport and whitespace appears in right of window.
In a real mobile device, When I check the website, the top menu Icon goes out of the width of screen and I can see the half of this icon so it seems that the rendering in the device simulator is the real logic which happens is a real device. If you zoom out then webpage in a real device, the Menu icon comes back to the screen however I have set the following and I expect that the page open in full width by default But it seems zoomed-In that I can oom out after page load):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More checks:
There is no calculated padding and margin in body and html when I inspect elements.
I have removed AOS library from the webpage to make sure that the thirdparty library is not making margin and padding but no change.
I have tested overflow-x:0 for body to make sure there is no overflow element but no change.
You have a div which its position is out of the width (viewport) of the website:
<div style="position:absolute;left:calc(10% + 350px);top:120px;color:#f57f20;font-size:20pt;">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
with Plan
</font>
</font>
</div>
Notice the calc(10% + 350px).
By the way, if you want to cut the overleft out, you can style the html tag (not, the body tag) like this:
html {
overflow-x: hidden;
}
I want to disable Boostrap 3.0 responsiveness then load a page (an invoice template) inside an iframe.
My iFrame HTML/CSS is:
<div class="row">
<div class="col-xs-12">
<iframe id="frame" src="http://my.app/template/one/pdf/html" frameborder="0" scrolling="no"></iframe>
</div>
</div>
#frame {
max-width: 1190px; // A4 page dimension ratio
min-height: 1684px;
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
I followed the instructions here, and was able to disable the responsiveness when loading the page into Chrome in iPhone 5 mode.
If I omit the viewport statement from the page head, it loads slightly off the screen like this:
If I add a viewport statement (and make it 950 wide) it loads perfectly like this:
<meta content="width=950" name="viewport">
When I then place it inside of my iframe, it just runs up as responsive like this:
I can see in my iframe's page head that the CSS file is the non-responsive boostrap version.
My questions are:
Is the iframe CSS getting overridden by the parent page's CSS. I expect no, so why would you think the template not loading in desktop mode in the iFrame?
Why does it not fit into the viewport without the meta tag per bootstrap instructions?
What could be causing the text at the bottom of the page to not be scaling with the rest of the page?
<iframe> is independent - it uses it's own html structure, thus it's own styling.
It's not possible to respond to your question without understanding the content of the 'invoice' page.
I've replaced the iframe code:
scrolling="no" frameborder="0" marginheight="0" marginwidth="0"
with
style="overflow: hidden; position: relative; border:0px; margin:0px"
It works well on all browsers except IE8 which displays ugly scrolling bars.
Is there any way to remove them ?
Try this answer: https://stackoverflow.com/a/4856854/4952851 although ignore the overflow-y as you already have the general overflow catering for x and y. Hopefully this will resolve the issue.
Failing that just make the iframe a little bigger (if it won't be a problem with the page layout) to cater for the slightly larger ads as Olli has suggested. I ALWAYS have to make iframes a little larger than they're supposed to be in order to display correctly.
Incidentally, it isn't specific to IE8, it happens in IE11 also (I haven't checked any others but I'm using IE11 and it has the same problem). Here's a capture from IE11:
A few things that you can do, Currently the iframe has a size of 750 x 200px.
If you make the frame a bit larger (~20px) the scrollbars most likely will dissappear.
You might want to try to add the following code examples directly to the frame.
scroll="no" style="overflow:hidden"
or this code
scrolling="no" horizontalscrolling="no" verticalscrolling="no"
I have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)
I am transitioning a page that used to have frames to an iframe approach to be compatible moving forward. The basic look is very simple, it's a fixed pixel height header, and then the variable height content taking up the rest of the screen space with a different page in it.
I have accomplished this via:
<style type="text/css">
* {overflow:hidden}
div#header {position:absolute;top:0px;left:0px;right:0px;height:86px;overflow:hidden;margin:0px;padding:0px;}
div#wrapper {position:absolute;top:86px;left:0px;right:0px;bottom:0px;overflow-y:auto;margin:0px;padding:0px;}
</style>
and
<div id="header">
content in top
</div>
<div id="wrapper">
<iframe src="http://someotherwebpage" style="width:100%;height:100%;" />
</div>
While this works perfectly in Chrome and IE, it fails in FF and others (i.e. iPhone). Any ideas how I can further improve this to work on all browsers?
Edit: To be specific, by "fail" I mean the scroll bar does not show up (vertical scroll bar), and thus I cannot scroll up or down in FF/others. In Chrome/IE, it shows up and works as expected.
Try changing * {overflow:hidden} to * {overflow:auto}