this is my website www.sklepdruku.pl.
https://sklepdruku.pl/project/wizytowki-skladane/ here u got visualisation off my problem, my iframe is there but something (js probably) is changing his size to 1px (inline style). Any suguestions how can i find this script?
you can solve it using css by adding this to your css:
iframe.pm_iframe {
min-height: 500px !important;
}
Update to prevent scrolling inside iframe add this overflow: hidden !important; inside body under the iframe
Related
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/
When opening modals, sidenav or data picker in Materialize CSS, the whole page is jumping right, because scrollbar is disappearing.
http://materializecss.com/modals.html
How I can prevent it?
On carefully inspecting that link in your question.....You may want to put
overflow: auto !important; to your html <body> tag css styling (quick hack)
example
body {
background-color: #FCFCFC;
overflow: auto !important;
}
this should fix the issue
body {
padding: 0 !important
}
I want to give the user the ability to resize a DIV to less than its declared width and height. How to ?
Code here: http://jsfiddle.net/hW4nn/
HTML
<div class="divClass"></div>
CSS
.divClass {
resize: both;
overflow: auto;
width: 200px;
height: 200px;
border: 1px dotted #000;
}
Have a look at jQuery UI's Resizable.
As far as I know, the browser will not let you resize any smaller than the initial size. My workaround would be to set the initial CSS to a minimal width and height (whatever you think that should be, e.g. 50px or so); then use javascript to change the CSS of the div onload so that it is properly sized.
See also HTML5 resize only on makes items larger than original size, not smaller.
I have a form with errors that appear above it that look like
<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>
And a form inside a <form> with a bunch of inputs inside of divs... nothing really out of the ordinary.
But I have javascript validation on my field with turns the form-error from display:none; to display:block; which resizes the container field fine. The problem lies in the fact there is a footer (also inside a div) that does not move down. If I open up IE8 developer and look at the main container (that wraps everything) it also does not extend. If I for example uncheck the main container width style and then recheck it, it fixes everything.
Is there a way to force IE8 to "resize" their divs when an element inside a div turns from display:none; to display:block;
PS. There is no funny css, no floats, no absolute positioning, nothing that would cause this...
Form Error Block CSS
.form-error {
color: #EB1F25;
}
Footer Block CSS
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
}
.footer-wrapper .links {
width: 960px;
}
After some investigating it seems the inline-block attribute on the container is causing the issue.
Ended up being an issue with display:inline-block; element not resizing. Changing to float worked.
try givin the width to the wrapper. remember the footer should be inside your main wrapper, Also give a height other divs... min-height or something similar.
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
width : 100px;
}
It's hard to tell what exactly is making the problems. But you can test out some of this tips I suggest you to try:
If your .form-error is showing up before (above) the actual <form ...></form>, then try to insert a <br clear="all"/> tag between those two blocks. If not, add clear:all to <form ...> and width:100% to .form-error.
If not, add position:relative and overflow:hidden first to the .form-error, if not helps, add it to <form...> too.
As already said, will be much easier if we could see your entire code, try to use jsbin with your entire css and html source code, because IE is very strict in html rendering.
This is the markup
img.shadow | div#content |div.shadow
I need to find a way to reliably keep the shadow images the same height as the content area. Problem is the content area can resize (like tabs that have different height, or parts of it that only appear in certain conditions). I was able to set the height of the shadow using javascript on page load, but then as soon as the height of the #content changes... not sure this makes sense, but...
Maybe this explains the problem better
http://jsfiddle.net/uLUnf/28/
The question is
how can I make the images (the grey boxes) resize along with the content (light grey box)?
http://jsfiddle.net/uLUnf/29/
You did it urself? :P
You could put the resize call inside the function that adds the content as well, like this:
jQuery('document').ready(function($){
$('#click_me').click(function(){
var id = $(this).attr('href');
$(id).show();
$('.shadow').height($('#content').outerHeight());
});
$('.shadow').height($('#content').outerHeight());
})()
Or it seems like you could get rid of the shadow images and the call to resize it entirely, and just add a border to the content in the CSS:
#content{
float: left;
display: block;
background: #eee;
width: 200px;
border-right: 7px solid #666;
border-left: 7px solid #666;
}