My page layout is structured in tables (I know this is not ideal - I inherited it).
I am trying to display an iframe in a div with the following code inside a table cell () as below:
<td class="style24" style="width: 800px">
<div id='outerdiv '>
<iframe src="www.google.com" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
The issue is the iframe causes the table cell to grow and then pushes the content on the right of the page off the page!
Is there a way to limit the size of the iframe that's displayed that won't make the table cell grow? Limiting the width of the iframe doesn't seem to have an effect, as soon as the div content is placed in the td the effect occurs.
You can try adding the width and/or height to the iframe and #outerdiv (add overflow-x to the #outerdiv as a failsafe):
<td class="style24" style="width: 800px">
<div id='outerdiv' style="width:800px; overflow-x:hidden;">
<iframe src="www.google.com" width="800" frameborder="0" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
place an css overflow attribute on the outerdiv, you might also declare the width of the iframe
This is working for me, but without seeing styles associated with #outerdiv, .style24, and #inneriframe, it's a little difficult to tell if this would work for you or not.
#outerdiv {
width: 800px;
height: 600px;
}
#inneriframe {
width: 100%;
height: 100%;
}
Related
I have an I frame inside of a <td> element. I'd like to dynamically scale the iframe so that it takes up 33% of the screen width (and automatically fixes the height).
When I try this:
<iframe src="google drive presentation url" frameborder="0" width="33vw" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
It only takes up 33% of the <td> element (which also has text in it).
Also, I tried using width="33%" but that didn't work either.
How can I fix this?
you must give width using CSS instead.
body {
margin: 0
}
td {
width: 33.3%;
background: red
}
iframe {
width: 100%
}
<table>
<tr>
<td>
<iframe src="google drive presentation url" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</td>
<td>
Foo Bar
</td>
<td>
Foo Bar
</td>
</tr>
</table>
Are you supporting anything older than IE9? Can you use vw units?
Here is a JSFiddle of the (rough) idea. The <div> elements on the bottom are for measurement/comparison.
As the title says, I have this small border around the entire table. I've just copied it from J2Ski to use on my website so it's not my own work.
I know this has most definitely been answered before but I can't figure out where to place the style in it and I'm not too sure what to place in there anyway.
<table style="border:none;">
<tbody>
<tr><td>
<iframe height="112" src="http://www.j2ski.com/snow_forecast/France/Tignes_mini.html"
width="340"></iframe>
</td></tr>
</tbody>
</table>
JSFiddle: http://jsfiddle.net/NGn9Y/
That's iframe border and not the table border, so use frameBorder="0" for your iframe element.
Demo
Note: IE requires capital B for frameBorder so make sure you don't
write frameborder="0"
Also, there is no harm in writing the below snippet in your CSS as #BeNdErR suggested, but that fails in older versions of IE, so also declare the attribute along with the below snippet in your CSS
iframe {
border: 0;
}
that is the iframe border
CSS
iframe{
border: none;
}
also, have a look at this other question about iframe border
I have a frustrating issue here that I can't seem to solve. I have a ASP.NET DataList which ends up getting rendered as a HTML <table> with columns and rows. This DataList is also contained within a HTML <table> that has columns and rows.
When the page renders, I have my window resized to 790x500 and my footer runs across the bottom. The overall page looks great. However this DataList is not resizing smaller and is containing a height expanding past my footer creating a scroll bar on the main page. I really need that DataList to be around 250px to fit in the window. For testing I'm using 100px just to see if I can get it resized.
I can't get this rendered <table> or surrounding elements to resize no matter what I try. I'm using the developer tools and changing the height to 100px on every containing element and nothing seems to shrink up the height. I even tried the sever control's Height property and that didn't work either (width property works fine). The DOM is a bit large, but this should show what I have and none of it has worked:
<div class="row-fluid">
<div class="span12" style="height: 100px;">
<table style="height: 100px;">
<tbody style="height: 100px;">
<tr style="height: 100px;">
<td style="height: 100px;">
<table style="width: 100%; height: 100px; overflow-x: hidden; overflow-y: scroll;">
<tbody style="height: 100px;">
<tr style="height: 100px;">
<td style="height: 100px;">
The culprit is here--> <table id="DataList1" style="width: 670px; height: 100px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-collapse: collapse;" cellspacing="0">
<tbody style="height: 100px;">
At this point I use the ruler and the table containing the DataList measures around 372px, much larger than 100px. The DataList seems to be resizing to fit all of the data inside of it, but I can't find anything in the DOM remotely 372px as an attribute. Even so everything I tried and I can't get the height to shrink.
What in the world am I doing wrong here?
Well the solution here was to wrap the DataList control in a <DIV> to control the height, as opposed to manipulating all of the surrounding <table> element pieces. This fixed the issue and allowed the height of the control to be set as needed:
<div style="height: 190px; overflow-x: hidden; overflow-y: auto;">
<asp:DataList ID="DataList1" runat="server"
Width="670px">
...
</div>
Hi I want to set table height 100% to its parent div without define height in div. My code is not working. I dont know what I am missing. Fiddle link
<div style="overflow:hidden">
<div style="float:left">a<br />b</div>
<table cellpadding="0" cellspacing="0" height="100%" style="border:solid 1px #000000">
<tr>
<td valign="middle">c</td></tr>
</table>
</div>
Not possible without assigning height value to div.
Add this
body, html{height:100%}
div{height:100%}
table{background:green; width:450px}
DEMO
You need to have a height in the div <div style="overflow:hidden"> else it doesnt know what 100% is.
This is how you can do it-
HTML-
<div style="overflow:hidden; height:100%">
<div style="float:left">a<br>b</div>
<table cellpadding="0" cellspacing="0" style="height:100%;">
<tr><td>This is the content of a table that takes 100% height</td></tr>
</table>
</div>
CSS-
html,body
{
height:100%;
background-color:grey;
}
table
{
background-color:yellow;
}
See the DEMO
Update: Well, if you are not looking for applying 100% height to your parent containers, then here is a jQuery solution that should help you-
Demo-using jQuery
Script-
$(document).ready(function(){
var b= $(window).height(); //gets the window's height, change the selector if you are looking for height relative to some other element
$("#tab").css("height",b);
});
Had a similar problem. My solution was to give the inner table a fixed height of 1px and set the height of the td in the inner table to 100%. Against all odds, it works fine, tested in IE, Chrome and FF!
to set height of table to its container I must do:
1) set "position: absolute"
2) remove redundant contents of cells (!)
Although some questions similar to this one have been asked before, this one is a little different.
I have a table that looks a little something like this:
<table>
<tr>
<td style="height: 100px;">
<img src="..." style="height: 100px;" />
<img src="..." style="height: 100px; position: relative; top: -100px;" />
</td>
</tr>
</table>
This will overlay the second image on the first one. However, the td insists on being 200px tall even though there is only 100px of content. Setting the td's height does nothing, which seems consistent with the answers to the other questions.
However, I do not have the option of embedding the contents in a DIV and setting the height to 100px because the td will still insist on being 200px tall.
How can I tell the td to just be 100px tall?
Edit: Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around - whereas the absolutely positioned stuff does not.
Edit: jsFiddle example can be found here.
This has nothing to do with the td really, but with the nature of position: relative. A relative element's space stays reserved in the document flow.
Get rid of the relative, and use position: absolute on the first image instead.
Edit: I just saw your edit. Hmmm. Thinking.
Two workaround ideas come to mind:
Slap a overflow: hidden on the td
If that doesn't work in all browsers or isn't valid (I'm not 100% sure right now) Put the two images into a <div height='100px;'> and put a overflow: hidden on that.
Declaring
<td style="height: 100px; width:100px; overflow:hidden"> ...
should help you.
There is 200px of content because position:relative does not free up the space the object occupied before it was moved. You NEED to use position absolute and probably an inner DIV because things like overflow tend to cause issues on TD's.
Overlay a second image in a table cell:
<html>
<head>
<style>
table {border:1px solid #898989;}
td {border:1px solid #0090aa; overflow:hidden; height: 100px;}
td div {position:relative;}
.col1 {width:80px;}
.col1 {width:128px;}
.over {position:absolute; top:0; left:0; }
.under {}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">1</td>
<td>
<div>
<img class="under" src="blank_file.png" />
<img class="over" src="19.png" />
</div>
</td>
</tr>
</table>
</body>
</html>
Instead of using position relative on the second image to move it up and overlay, use negative margin.
Change this.
<img src="..." style="height: 100px; position: relative; top: -100px;" />
Use:
<img src="..." style="height: 100px; margin-top:-100px" />
That way, it'll actually move the image up and that TD will then only span 100px.