I'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.
The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?
Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)
Updated again for the most universal solution so far:
<style>
div.ImageBlock
{
height:100%;
width:100%;
left:0px;
top:0px;
overflow:auto;
}
div.IE_CompatMode
{
position:absolute;
}
</style>
Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.
<td rowspan="2" style="position:relative;">
<div class="ImageBlock [conditional:]IE_CompatMode">
<img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
</div>
</td>
And nothing (that I've yet tried) works in Firefox.
You would have to use a wrapper element around the content to restrict the height.
<table>
<tr>
<td><div class="overflow">This is short.</div></td>
<td><div class="overflow">This is longer.</div></td>
<td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>
</tr>
</table>
.overflow {
max-height:40px;
overflow:hidden;
}
var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');
Could always give the image a percentage e.g. height="100%" that should make it the full size of the cell that it is in but would restrict overflow.
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
I am working on a table that I cannot edit, I cannot add any HTML, I cannot add any JS. Everything has been pre-generated and all I can do is add CSS to it.
So table has 2 rows, one is sidebar, second is center content. I wanted to make the sidebar 210px wide and float it left, the same I did to center content. All works fine in all browsers but IE7. When I inspect it with IE7 developer tools, I can see that the row and the TD under it are always 100% wide and there is no way to assign a width value to it.
Is there a work around to this problem?
Sample code.
<table>
<tr id="sidebar"><td>Some data</td></tr>
<tr id="main"><td>Some data 2</td></tr>
</table>
CSS:
#sidebar
{
display:block;
width:210px;
float:left;
}
#main
{
display:block;
width:730px;
float:left;
}
Please advise
i don't have ie7, but setting the rows display:table-cell; and putting a width on the table works in chrome in this example. http://jsfiddle.net/jalbertbowdenii/7Wuku/
I think a good way of doing it is without the second row... Of course if you can make your markup like this:
<table>
<tr>
<td id="sidebar">Sidebar content</td>
<td class="main_cont">Main content</td>
</tr>
</table>
In this markup you won't need to float the tds, simply state the width.
A live example is here: http://jsfiddle.net/skip405/QySz2/1/
But if you can't change the markup - I'm afraid you'll never teach IE7 to float table rows))
In both IE8 and Firefox I am experiencing the following:
I have a panel that is 30px in height, within this panel I have a single row table with 30px in height. When it displays on the browser window the table does not fill the height of the panel (there is a small amount of the panel showing on the top and bottom. How do I correct this so that the table takes up the entire height of the table?
HEADERPANELTABLE CSS:
table.masterHeader
{
background-color:transparent;
border-collapse:collapse;
height:30px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
display:block;
width:820px;
}
HEADERPANEL CSS:
.HeaderPanel
{
background-color:#0079d0;
height:30px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
padding:0;
width:820px;
}
SPACER CSS:
div.Spacer
{
background-color:transparent;
height:30px;
}
MAINPANEL CSS:
.MainPanel
{
background-color:#6699cc;
height:700px;
margin-left:auto;
margin-right:auto;
width:820px;
}
HTML CODE:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
<asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
<table class="masterHeader" cellspacing="0" cellpadding="0">
<tr>
<td class="Account"></td>
<td class="Name"></td>
<td class="Spacer"></td>
<td class="CompanyName"></td>
<td class="Logout"></td>
</tr>
</table>
</asp:Panel>
<asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
<div class="Spacer"> </div>
<asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>
Have you looked at the page in something like Firebug, where you can look at each DOM element, see the attributes (like margin, padding, and so on). That way you might be able to see exactly where that extra spacing is coming from, and what styling attributes are being applied to each element.
set the cellspacing to 0
<table cellspacing="0">
<tr>
<td></td>
</tr>
</table>
You haven't posted code (HTML or CSS) or stated what browsers you are seeing this in, so difficult to know for sure. Some suggestions:
make sure your table has zero margins
make sure the panel doesn't have any padding
make sure cell spacing is zero
make sure some other element isn't blocking the table
make sure your css styling is not being over-ridden somewhere
If you don't have it already, you should install the Firebug addin https://addons.mozilla.org/en-US/firefox/addon/1843/ for Firefox. This makes it extremely easy to inspect the DOM and CSS styling applied.
Because an ASP:Panel breaks up the panel into div tags and with rounded corners it add anothe 1px border to the panel which is placed after the table has been placed. In order to fix this the table had to be placed within a div tag and float the div above the panel.
I notice that you aren't doing anything about your table borders. Could this be the gap you are seeing? If your borders have any width for any reason then they could be showing which might be giving you the effect in question.
I made a quick jsfiddle proof of concept based on what I assume your outputted HTML will look like in its simplest form. I'm not familiar with the RoundedCornersExtender control though and I suspect that is modifying the HTML of the main div.
http://jsfiddle.net/tAgp3/1/
You can see that this simplified form works but I assume that the rounded corners is trying to do some nasty tricks with embedding extra DIVs with background to do rounded corners. These could be what is causing your additional padding.
Again I ask if you can post the actual html outputted to the browser so we can see if this is the case or not.
I have a <table> with table-layout set to fixed, so that all explicit width/height definitions are respected no matter what. I'm trying to get a certain <td> to overflow, but even though I did the table-layout: fixed it doesn't work.
What should I do to make it work?
It won't work because the <td> will always have the size of an image
You can use height and width attributes. If the image size is 400x300, typing <img src="..." height="100" width="100" /> will show 100x100 image
If you want to crop an image use
<style>
#id{
background:url(...) no-repeat; /* you can use background-position css property here... */
height:100px;
width:100px;
</style>
<div id="image"></div>
Using table-layout: fixed, you can only guarantee the column widths, not heights. Also, the content of cells has no bearing on those widths. From w3schools:
The horizontal layout only depends on
the table's width and the width of the
columns, not the contents of the cells.
How much control do you need over the individual cells? Are you going for hidden overflow or one that can scroll? It's not clear from your question.