I had to move my iFrame down 100px, i need to move the bottom up 100px but cannot get the bottom attribute to function. Only the top and left attributes.
It’s a dynamic iFrame, just need to move the bottom up 100px.
<iframe src="Our Source" style="border: inline-block; position:fixed; bottom: 20px; top:100px; left:0px; right:0px; width:100%; height:100%">
This need to be seen within the context of its containing elements.
Also
border: inline-block;
Should that be display?
Hi Sam,
I apologize, that was a typo. It is display: inline-block; in the code. I must have made an error when copying it.
That is the only line of code that I have.
A web page must at least have a doctype, html, head and body tags.
These rules contradict each other:-
bottom: 20px; top:100px; and height:100%
And for height:100% to work, the parent container must have a height defined.
Perhaps try padding top and bottom.
Hi Sam,
It is within a Drupal Page, I believe that is why i don’t have a doctype, html, head, and body tags specified.
I am somewhat new so I apologize. The iFrame is dynamic to the user resizing the webpage. I thought top / bottom attributes moved the iframe position? When i did Top: 100px; that moved the top down 100px so it was under the menu on the website.
For whatever reason, the 100% was functioning correctly, until i moved the top down 100px. I just need to move the bottom up 100px.
I am open to any suggestions that you have.
I have tried margins, padding, etc. Top / Left work but Bottom / Right do not.
So they will be created by the cms, that’s a bit clearer now.
View Source should show th code in context.
They do. But when you define both opposite sides of a box, you also define a size.
So a box that starts 100px from the top of its container and 20px from the bottom, can’t possibly occupy 100% of the height.
Eg, if the container was 500px high, the box would be 380px, that’s only 76% height.
So everything depends upon the container.
Yes, it’s actually a bit more tricky being an iframe, it may need a wrapper to add padding.
Yes that is correct, I do apologize about that I should have specified when asking. It does show the doctype, html, head, and body tags when viewing the source.
That makes complete sense to me Sam. I suppose I will need to do some more research on how to accomplish the task that I would like. Basically I want a full page dynamic iFrame minus 100px at the top, my issue is it moved the bottom 100px down. I’m not sure how to accomplish that without the 100% or what other methods would be best.[quote=“SamA74, post:7, topic:244352”]
Yes, it’s actually a bit more tricky being an iframe, it may need a wrapper to add padding.
[/quote]
I can certainly try to add a wrapper and see if this will resolve the padding issues. If it would, that would be the best solution. As long as I figure out the contradictory statements with the height.
Try this:-
.wrapper {
display: block;
position:fixed;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
Hi Sam,
I will try this and report back. I need to figure out how to tie it together with what I have in place.
Sorry for the delay.
<div class="wrapper">
<iframe></iframe>
</div>
Because iframes are somewhat different for other elements in terms of their content, the padding won’t work. The idea here is to have a wrapper element which has the padding applied and the iframe filling that.
Hi Sam,
I will try this, I need to figure out how to get Drupal CMS to utilize the CSS. I don’t believe it can be entered withing the same window as the HTML.
On this part:
<div class="wrapper">
<iframe></iframe>
</div>
I am a little confused on how to tie in my iFrame code that I have with the two wrappers and how to type it all up. Please excuse me, I am relatively new to this. I understand what you have told me, but am confused on how to make it happen. Again, I apologize.
I don’t know Durpal, but I’m sure it must be able to take custom css somehow.
It’s just a case of wrapping your iframe in a div, like shown. The div has a class referenced in the css.
Hi Sam,
That is not I problem I will look at that part and figure out how to utilize CSS with the page I am wanting to edit.
Ahh that makes sense. Ok, I can complete that. I just need to get the CSS with Drupal figured out. I will report back in once I complete that Step. Thank you for your assistance! I’ll update you soon.
Hi Sam,
I was able to get CSS working with the CMS.
In case anyone has the same issue, I used a module called ‘Code per Node’. It allows you to edit CSS and JavaScript on specific parts of your site or globally.
The top and bottom are perfect, there is just one remaining issue. I am not sure why, but the iFrame has a space on the left side of the page about 300-400px wide and I cannot get the iFrame to move left.
I tried a couple of code changes but they did not resolve the issue.
Hello,
Does anyone have any suggestions on why the iFrame is not flush with the left side of the web browser?
Here is the code, thanks to SamA74!
.wrapper {
display: block;
position:fixed;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
<div class="wrapper">
<iframe src="MY SOURCE"></iframe>
</div>
I am not sure why it is off.
Thanks!
Zane B
The code I supplied will make the iframe and its container fill whatever container it is put in.
Whether that container fills whatever space, is all down to that container.
But I know nothing of the parent container or the rest of the page it appears in.
Hi Sam,
That is ok. I am trying to figure it out by modifying the code.
It was suggested to me to try
html, body {margin: 0px;}
But that modified the page and not the iFrame. I will have to research this topic more.
Thank you for all of your assistance!
-Zbrind
Do you use “Inspect” in your browser?
That should make it easy to find the problem.
Hi Sam,
I haven’t really utilized that for troubleshooting, but that is a great suggestion!
Thank you!