I have tried almost anything on the internet to remove scrollbar from my HTML Page. I am continuously getting dual scrollbars, which I don't want. I have made a page and have a menu bar on the top and want a page to be embeded below the menu bar. But all I get is an output like this: Take a look at this picture and notice the dual scrollbar. I have tried the following code in my html:
<style>
#container{width: 100%; height: 100%; overflow: hidden;}
iframe{width: 100%; height: 100%; border: 0;}
body {
margin: 0;
}
</style>
<body>
<div id="container">
<iframe src="http://myurlhere.somedomain"></iframe>
</div>
</body>
Any ideas what should I do?
PS: I want to retain the body scrollbar but remove the iframe scrollbar and also I want results in full browser width and height. Please don't post answers like
<iframe src="url" scrolling="no"></iframe>
or
frameborder="0"
or
iframe
{
overflow-x:hidden;
overflow-Y:hidden;
}
Because all these methods DON'T WORK!
I need to scroll the iframe but without scrollbar. Hope I'm clear enough with the question.
Try using iframe resizer https://github.com/davidjbradshaw/iframe-resizer
It hides iframe scrollbar and adjusts it based on parent window size.
From your screenshot it looks like you're using a top frame which includes a menu, and load the content in an iframe at 100% height.
The reason you're getting a double scrollbar is because the 100% height does not subtract the height of the menu.
Since the parent window won't know the height of the iframe contents (unless you use quite some javascript) you're better off making sure the parent window won't show the scrollbar and use the scrollbar from the iframe. This does have the effect of leaving the menu always at the top of the window, which may or may not be desired.
Depending on the browsers you'd like to support there are a few css only methods you could try.
(Edit: clearly labelled the different methods)
Method 1: css flex
The cleanest way to achieve this is using display: flex. By giving your body a display: flex; flex-direction: column and your #container a flex: 1 makes the #container fill the remaining height after the header. Example: https://jsfiddle.net/Ldyb418y/
Method 2: css calc
If the header has a fixed height, you could use css's calc() to make the height 100% - the height of the header: #container { width: 100%; height: calc(100% - 30px); overflow: hidden; }. Example: https://jsfiddle.net/jgdyqe1t/
Method 3: box-sizing and padding
If for some reason you can't or won't use calc and your header has a fixed height, you can use #container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; } in combination with position: absolute on the header. This places the header on the top padding of the iframe. Example: https://jsfiddle.net/dtk9ed8f/
Method 4: set iframe height from javascript
If you don't want the menu to always stay on top, you're stuck with using javascript. In this case you need to make the iframe tall enough to fit all the contents. However that means you will need to access the iframe's content in some way to get its height. This will only work if the parent frame and the iframe are on the same domain.
Using the method as described by hjpotter92 in Make iframe automatically adjust height according to the contents without using scrollbar?
Snipped from the post above:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And on the iframe:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
You will need to remove the overflow: hidden from your #container. Example: https://jsfiddle.net/wbznd35n/
Related
I have two iFrames, one is the content (this has nothing to do), but the one is driving me nuts is a vertical menu than displays several options to the user.
Everytime the vertical menu (let's call it vmenu) shows up I calculate its height depending on how many options the menu will display, and if the resultant height is greater than window.innerHeight, vmenu's height is set to that window.innerHeight.
But then it won't be scrollable. Instead, if I set its height to 100% it will be scrollable but will extend to the whole page (background page) which makes it scrollable too (two scrollable frames, awful).
What I only want is to set vmenu's height to window.innerHeight and to be scrollable without affecting whole page.
I have already set overflow-y: scroll and also tried setting scrolling attribute to 'yes' and force it, but nothing.
My iframe code:
<iframe
id="iFrameVMenu"
name="iFrameVMenu"
frameborder="0"
style="width: 0%; height: 100%; position: absolute; right: 0px; visibility: hidden; overflow-y: scroll;"
scrolling="auto"
src='<%= request.getContextPath() + "/.../.../.../layout.jsp" %>'
onmouseout="...">
If it helps, these two iframes I mention (only one matters now) are in a JSP page.
I would appreciate any idea on how to get this to work properly.
Thanks.
Sizing embedded <object>s while trying to get the wrapping div expand with the size of the embedded -in this case- html page really is a pain.
The last hours I tested many solutions and even the javascript resize onload ones don't seem to work in this case. Iframes didn't help either.
<style>
.outer {
width:100%;
position:relative;
overflow: visible;
}
.inner {
min-height: 1600px;
width: 100%;
position:relative;
overflow: visible;
}
</style>
<section id="loadersection" class="outer">
<object id="loader" class="inner" type="text/html" data="/static/index.html">
</object>
</section>
The embedded html page is rather a javascript app and therefore scrollHeight at $(document).ready(), onload, $(window).load() returns a height of 150px. The real height when completely loaded is about 1400 px. Are there any events which report a loaded child object?
Is there a way to embed a html page in its full size without scrollbars into a div which expands if e.g. an accordion-menu is expanded within the child object?
How to set current page height and width from within JavaScript?
I am using ASP.Net Web Forms. I have some splash screens implemented as aspx web forms. I need to just redirect them and not to open by window.open() function.
How do I give size and position to current window?
I have tried the below code, but it did not work for me
<body style="margin:0px;width:600px; height:90%;" >
Try this
$(function() {
document.body.style.width = '600px'
document.body.style.height= '900px'
});
or if you are using jQuery...
$(function() {
$('body').css('width', '600px');
$('body').css('height', '900px');
});
Resizing the current window of the browser is actually impossible. That can only be done by the user (fortunatly :) )
You can set dimensions to a new window, with window.open();, but that's all.
As I said in comment : Just think about a web where every site could resize user's browser...
You won't be able to control width of body. Rather, you can use a inside your body and outside your content, and then set width, height and position of that .
Also, to set height of that in percentages, you will need to apply height:100% to both html and body in CSS.
So, your content could look like,
<html>
.....
<body>
<div class="content-wrapper">
.....
</div>
</body>
</html>
and your css can look like,
html, body
{
height: 100%;
}
.content-wrapper
{
width: 600px;
margin-left: auto; /* to center the div */
margin-right: auto; /* to center the div */
height: 90%;
margin-top: 10%;
box-sizing: border-box;
}
I am creating a dialog with an iframe inside, the problem is that the border keeps showing in IE8, this works perfectly in any other browser.
This is what I have tried, I also tried border:none
$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>');
Thanks in advance
Add the frameBorder attribute (note the capital ‘B’).
So it would look like:
<iframe frameBorder="0">Browser not compatible.</iframe>
Have you tried setting it via CSS?
iframe {
border:0px none transparent !important;
}
Also, these seem to work too - marginheight="0" marginwidth="0" frameborder="0". Taken from this post on the same IE issue.
Try this:
<iframe frameborder="no" />
I realize IE8 is a nuisance when it comes to iFRAMES. "Frameborder" is deprecated in HTML5 so while it's the easiest option for IE8, this is not a long term solution.
I have successfully hidden borders and scrollbars by placing the iFRAME inside of a container. The iFRAME container itself is placed inside of a div for overall positioning on the web page. The iFRAME itself is absolute positioned and negative margins applied to both top and left in order to hide the top and left borders. Width and height of the absolutely positioned iFRAME should be coded at over 100% so it exceeds the parent size to the point that the right and bottom borders are not visible (also the scrollbars are not visible). This technique also makes the iFrame responsive because the iFRAME container uses percentages as well as the div that holds the container. Of course the iFRAME parent div must be set to overflow:hidden.
Here is an example code:
/*THE PARENT DIV FOR THE iFRAME CONTAINER*/
.calcontainer
{
width:100%; /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/
max-width:200px;
margin:auto;
}
/*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/
.calinside /*container for iFRAME - contents will size huge if the container is not contained and sized*/
{
position:relative; /*causes this to be the parent for the absolute iFRAME*/
padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
height: 0;
overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/
}
/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE. SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED. A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/
.calinside iframe
{
position: absolute;
top: 0;
left: 0;
width: 100% !important;/*must expand to hide white space to the right and below. Hidden overflow by parent above*/
height: 103% !important; /*must expand to hide white space to the right and below. Hidden overflow by parent above*/
/*IE8*/top: -2%;
/*IE8*/left: -2%;
/*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/
/*IE8*/height: 105% !important; /*hide white space and border below. Hidden overflow by parent above*/
}
frameborder can be a 1 or 0, not sure "no" is a valid value. Coda provides valid value options while coding and only 1 and 0 are available to use when I do this to my iframe.
I won't post the code directly but you can see it here: http://markbrewerton.co.uk/work.html
I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?
Cheers
The first part is the setup the bounds of the div by using the height and width styles.
After that set the overflow style.
Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
Try this (if you want scrollbars):
#yourdiv {
height: 300px; /* fixed height */
overflow: scroll;
}
...or this (if you want to just clip the content):
#yourdiv {
height: 300px;
overflow: hidden;
}
Edit: You can also fix the height of the <iframe> itself:
#youriframe {
height: 300px;
}