I have an IFRAME inside a dijit/layout/contentpane.
When the Iframe html renders larger than the contentpane size, there are no scrollbars at the or contentpane
Using overflow: auto doesn't help.
Setting the iframe's scrolling=yes displays scrollbars that do not work.
When I set the iframe e.g. height=1000, the contentpane then does provide scrollbars. (problem there is that the iframe declaration has no idea in advance how big the content that it will render will be, to be able to guess/kludge a height)
Any suggestions?
It would be better you can post your code, I have an iframe in ContentPane and it works correct. Here is my code (the point is you need set width and height 100%):
var reportCP = new ContentPane({
region: "center",
className:"wpt-report-pane",
content: put("iframe.wpt-iframe") // Here I use put-selector,you can use dojo.create as well
}).placeAt(myBorderContainer);
And Css classes:
.wpt-report-pane{
background-color:#ddd;
}
.wpt-iframe{
border: 0;
width: 100%;
height: 100%;
}
Related
I have some svg files with position: "absolute" in my page, but whenever they're positioned close to the corners of my page they end up expanding the width of my Container element (I'm using Material UI React), I've tried using "maxWidth":"100vw" on the page container, with no success, as well as the prop maxWidth="lg" and "md". If possible I'd like the svg or img file to just disappear into the nothing without interacting in any way with its outside container https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6
Have you considered doing something like this?
.container {
/* If for some reason the image doesn't fit, hide the overlap */
overflow: hidden;
}
/* Make image sit within it's container */
img {
height: auto;
width: 100%;
}
As the title, I was trying to create a CSS print style-sheet and encountered this problem. When I tried to print a full-screen overlay with scrollable content, only the content displayed will be printed and the non-displayed content is somewhat ignored. I was wondering how to tweak the print mode with CSS so the full-screen overlay will have the same behavior as a regular page(the full content will be printed no matter if it's currently on display)
as you said you're on an overlay, your html's body tag could have scrolling disabled and position fixed.
// You need to remove below css properties
body {
overflow: hidden;
position: fixed;
}
I assume your overlay is an img or div with background-image set.
You could modify its positioning rules only if the page gets printed with the media-rule
#print {
/*css code on print*/
}
and the positioning for filling the eitire screen is possible with:
position: absolute; /*maybe try "fixed"*/
top: 0;
left: 0;
width: 100vw;
height: 100vh;
First of all, using Angular 4, bootstrap 3, html 5.
Right now, I have an iframe <iframe src="http://test.test"></iframe> with the style
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100%;
}
When the html pops, the height is correct (and I have no scrollbar), but when the content of the iframe page changes, a scroll bar appears. My objective is to not have the scrollbar in the iframe, NEVER.
EDIT1: Already tried overflow: hidden;, does not work.
EDIT2: I do not want content to spill onto the parent page.
I had a similar issue and I add a js script to take the full innerHeight, try this, you can also implement it onload of the window (you can use id, but i always show class example because it can be used multiple times) :
<script>
window.onresize = function() {
var frame = document.getElementByClassName('myFrameClass')[0];
frame.style.height = window.innerHeight;
}
</script>
EDIT : must have scrolling="no" on the iframe tag, and the overflow: hidden css rule for inner content
Try adding overflow: hidden to your styles.
I would like to inject an iframe on the right side on a website to create a vertical panel. As "panel" I mean : it should be on the right side, cover the full visible height of the page, not be affected by scrolling, but "push" the website content (as opposed to cover).
I tried modifying padding-right on , but it doesn't work on all websites (and only affect non-positionned elements).
It should work on any website with weird layout, e.g. http://orange.jobs/
Injection is not a problem (it's a Chrome extension).
You can do this via css. To cover the full visible height and make the position of this element fixed on the site do:
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100px;
Try not to use
height: 100%;
as this would be rendered differently by every browser. Use top and bottom instead. You can choose a width with percentage or pixel values.
This css code could be applied to every html element.
If there are issues with positioning try to add
display: block;
or
display: inline-block;
I've added a jsFiddle for this.
Update:
To make the panel not cover the sites content, add a margin to e.g. the body tag:
body {
margin-right: 100px;
}
The margin should be the width of your panel. jsFiddle
I put a Google+ buttom on my site. This is the code:
<div id="gplus"><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120"></div></div>
#gplus {
position: fixed;
bottom: 40px;
left: 5px;
z-index: 1;
width: 120px;
overflow: hidden;
}
But the iframe that Google put into inner div is 1200px width and cover content. How to limit it? I fixed width of #gplus and add overflow:hidden but it doesn't help. :/
max-width: 500px; or any maximun width you want, in this way you can limit nor control the width of a element.
You can add a new style definition to make the overflow inherit into the inner div. eg.
#g-plusone {overflow:inherit;}
This won't work in IE7.
You may find that you need to add a class definition to the generated iframe so for instance add a class definition for
#gplus iframe {width:120px;}
This will set any iframe in the #gplus div to have a width of 120px.
UPDATE : having looked at your site the following style should fix the issue
#gplus iframe {min-width:120px !important;}
Google is setting the minimum width of it's frame, but you can override it by setting the min-width and using the important override.