Here is my iframe :
<div class="col-md-5 md-offset-1 col-sm-12" >
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/2lW2/4ew" width="100%" height="224"></iframe>
</div>
And here is the result :
As you can see :
there is a scrollbar, although i specified "no".
I need to scoll to access the confirmation button
When I increase the height of iFrame, it doesn't resize the inside box.
Any help ?
Related
I have embedded a google map successfully with this Responsive iframe (google maps) and weird resizing
But I cannot change the width, it's too wide. Changing width:100% works but then it's not in the middle of page anymore.
Use :
<div style = "text-align:center;">
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>
</div>
I have a this :
<div style="height:100%">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe width="100%" frameborder="0" height="100%" src="baba"></iframe>
</div>
It's showing me 2 scroll bars. The height of the iframe is 100% but it's finally 100% + 30px. I don't know how to resolve that
You can use property calc() like this :
<div class="container">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe frameborder="0" src="baba"></iframe>
</div>
CSS
.container iframe{
height:calc(100% - 30px);
}
The bad about this maybe is compatibility check it here
I try to get the height of an element that is in a iframe and that iframe is in a div with display: none. I need the height in the document in the iframe, not outside. So you don't have to think about security constrains.
Edit: Here is a small fiddle to demostrate the problem: http://jsfiddle.net/bv5JH/1/. console will log 0. And I am not able to append the div#myelement (or a copy of it) to some visible elements (so that it will be rendered and I can get the height like in the following "solution").
I found some solutions like:
var copied_elem = $("#myelement").clone()
.attr("id", false)
.css({visibility:"hidden", display:"block",
position:"absolute"});
$("body").append(copied_elem);
var height = copied_elem.height();
var width = copied_elem.width();
copied_elem.remove();
That will work if the element itself is display:none. But I dont have any displayed elements at all in the iframe, so I can't append it to a displayed element.
Any idea how to get the height anyway?
Since you seem to have an interaction set up between the IFRAME and your content, it should not be hard to apply this to the IFRAME itself:
position: absolute;
display: block;
top: -999999;
left: -999999;
Then you should be able to get dimensions of your element inside the IFRAME and once you got that, return that IFRAME back to its original position by resetting those styles.
duo to I have no enough reputation to commit.so i say here.
Change iframe's position is a good idea,yeah.
the image blow is my code which is a tab.
<div class="table census-table">
<div class="census-table-list">
<iframe src="census-baseData-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style=""></iframe>
<iframe src="census-activeUser-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
<iframe src="census-userKeep-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
iframe src="census-userPay-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
</div>
</div>
This iframe's width and height won't change. I want responsive design. Please help.
Now:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="300"
height="300">
Modified 500x500 - not working, still 300x300:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="500"
height="500">
for a pure CSS solution you need to wrap your iframe around a container and apply styles to it, for more details please see http://andmag.se/2011/11/responsive-embeds/
Another option is using jquery
please take a loom at https://gist.github.com/aarongustafson/1313517
Try this code,
<html>
<body>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.iframe1 {position:relative;}
.iframe1 .ratio {display:block;width:100%;height:auto;}
.iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
<div class="wrapper">
<div class="iframe1">
<img class="ratio" src="sometransparentimage.jpg"/>
<iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>
I have the following code:
<td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="index.php?page=1" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scrolling="auto"></iframe>
</td>
I have don't see any scoll bar, either vertically or horizontally.
Any ideas?
Thanks
You should only see a scrollbar in the iFrame if the page you are opening in the iFrame is bigger than the size of the iFrame. Therefore, if 'index.php?page=1' will fit on a 810x100 window than the iFrame won't have any scrollbars. If you are expecting to see a scrollbar in the td that holds the iFrame you would need to style it differently. You would need to add style='overflow:auto' to the td that holds the iFrame. By doing this you are telling that td that if it's content is larger than it's max height and width it should have scrollbars.
This renders a horizontal and vertical scrollbar for me in IE7:
<html>
<body>
<table>
<tr><td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="http://www.google.se" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scolling="auto"></iframe>
</td></tr>
</table>
</body>
</html>