HTML Object Tag Issue - html

I am using a object tag inside a div to load a html page.
The loaded html page's height is more than the div's height.
The div is not expanding itself to accommodate the inner dynamic content.
How to solve this issue?
<div data-role="page" id="pagetwo" style="overflow:auto;">
<div data-role="header" style="background-color:brown;font-color:orange;" >
Back
exit
<h1 style="font-color:white">events</h1>
</div>
<object style="width:100%;background-color:orange;height:100%;" scrolling="no" type="text/html" data="http://localhost:8080/events.html">
</object>
</div>

try adding this to the style of the div:
display: block;
overflow: auto;
height: auto;

Related

How do I get fullscreen div without iframe?

My website https://saxobroko.gq has multple divs as different windows and when I take away the divs they stop fitting the whole page.
I've tried using css to make it fullpage without the iframe and with just <p>Test</p>
I want the iframe to fit the users view without having an iframe in it.
Edit: I will include the before and after code.
Before (Not Working):
<style>
.sec1 {background-attachment: fixed;min-height: 100%;background-position: center;background-repeat: repeat-xy;}
</style>
<div class="sec1">
<iframe src="#"></iframe>
</div>
After (Working):
<style>
.sec1 {background-attachment: fixed;min-height: 100%;background-position: center;background-repeat: repeat-xy;width:100%;height: 101vh;}
</style>
<div class="sec1">
<h1>Sec1 Test</h1>
</div>
try applying this style into your iframs that are wraped in the div with sec(*) w3-center class name.
for example :
.sec4 w3-center > iframe {
width: 100%
height: 100vh;
}

Embed an html web-page inside another one and scroll it using the parent scollbar

I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/

How to hide Horizontal scrollbar in Iframe tag?

I have an iframe inside a div. I need to hide the horizontal scrolling bar.
I just need the vertical one activated.
HTML Code
<div id="rc">
<div>
<iframe class="defRC" src="url"></iframe>
</div>
<div class="clear">
</div>
I've added some CSS code but without success
.defRC {
overflow-y: hidden;
width: 1000px;
height: 600px;
}
<iframe scr="url" class="defRC" scrolling="no" />
see also: https://stackoverflow.com/a/18470016/2277280

How do I center an embedded SVG File?

I'm using an embedded SVG file as the top element on my page. (a header?)
It loads just fine, but nothing I try seems to get it centered.
Here's what I'm using at the start of the body:
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
I've wrapped it up in a DIV and used CSS to "margin:auto" but can't get it to budge without just padding it. The problem is that it goes wonky when I resize the window.
HTML
<div class="parent">
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
</div>
CSS
.parent{
display:block;
margin:0 auto;
}
or use this css
.parent embed{
display:table;
margin:0 auto;
}
I am adding code here. Check it may be it helps you..
HTML:
<div>
<img class="papa" height="100" src="http://s.cdpn.io/3/kiwi.svg">
</div>
CSS:
<style>
div { text-align:center}
</style>
Here is a fiddle http://jsfiddle.net/6sRR2/
Hope. It Helps You :)

Styling doesn't help align Facebook button

I have a page here that has a div with an Facebook recommend button.
http://www.comehike.com/hiking.php
I put this styling around the Facebook code
<div style="align:center">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
</div>
But it doesn't align to the middle of that div. Any ideas on how to get it to center-align?
A div is a block-level element, so you would center it with left and right margins set to auto, and by giving it a width smaller than its parent:
.style-me {
margin: 0 auto 0 auto;
width: 450px;
}
Change 450 on the div and iframe to whatever you need it to be. I'm not sure about the end result you are going for here.
What you align is the iframe it generates not the this tag:
View the Dom using firebug or inspector you will see what i am saying
UPDATE:
It will be easier to style the parent element, for example the containing div:
<div class="style-me">
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
</div>
CSS:
.style-me {
...rules
}