I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100px and overflow:auto, hoping for scrollbars to appear when the content does not fit.
It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.
I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.
This is also logged as an official bug in the final, release version of IE8
Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.
This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.
It is logged as a bug in the final version of IE8 with no fix.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
There is a really, really hacky CSS workaround:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.
{
overflow:auto
}
Try div overflow:auto
I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
{max-height:200px, Overflow:auto}
Thanks to Srinivas Tamada, The above code did work for me.
Similar situation, a pre element with maxHeight set by js to fit in allotted space, width 100%, overflow auto. If the content is shorter than maxHeight and also fits horizontally, we're good. If you resize the window so the content no longer fits horizontally, a horizontal scrollbar appears, but the height of element immediately jumps to the full maxHeight, regardless of the height of the content.
Tried various forms of the css hack mentioned by Jeff, but didn't find anything like it that wasn't a js bad-parameter error.
Best I could find was to pick your poison for ie8: Either drop the maxHeight limit, so the element can be any height (best for my case), or set height rather than maxHeight, so it's always that tall even if the content itself is much shorter. Very not ideal. Wacked behavior is gone in ie9.
Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.
To reproduce:
(This crashes the whole page.)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
X
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(Whereas this works fine...)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
The quick brown fox
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(And, madly, so does this. [No content in the div at all.])
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I found this :
https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
and this works for me perfectly so I decided to share this.
Related
We're embedding wkhtmltopdf (0.12.1) in a Java application, using stdin and stdout for input/output. We want multiple (different) headers in our PDF, so instead of using the --header-html option we're using a thead, which is repeated on several pages. Here's a little example HTML:
<!DOCTYPE html>
<html>
<body>
<table style="page-break-after: always;">
<thead>
<tr>
<th>My first header</th>
</tr>
</thead>
<tbody>
<tr>
<td>First content</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>My second header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Second content</td>
</tr>
</tbody>
</table>
</body>
</html>
So far so good. Problems arise when the content spans multiple pages. The header is then displayed on top of the content, overlapping it. Example html and PDF. Notice that the second header is rendered just fine, since the tr only spans one page.
Other people have had similar problems. There are some workarounds for this when you're using the --header-html option, such as adding --header-spacing or --margin-top, but these options have no effect on the repeated thead. Any ideas?
I solved it with these three css rules:
thead { display: table-header-group; }
tfoot { display: table-row-group; }
tr { page-break-inside: avoid; }
you solve this issue by adding the following css.
tr {
page-break-inside: avoid;
}
I found tr { page-break-inside: avoid; } worked to a point, but not when my headers spanned multiple lines. Since I wanted to keep my thead section, my solution was to switch the repeat off.
thead, tfoot {
display: table-row-group;
}
This view works well with IE9 and Chrome. However, not with IE8.
When the page is rendered, this is how it looks like:
My HTML (MVC3 View) is as shown below.
<div id="machinedisplay" data-bind="with: selectedMachine" >
<h2><span data-bind="text: MachineDesciption" /></h2>
<!-- ko with: my.vm.machineData -->
<table>
<thead><tr>
<th>Point Name</th><th>Description</th><th>Points Data</th>
</tr></thead>
<tbody data-bind="foreach: Points">
<tr>
<td data-bind="text: PointName()"></td>
<td data-bind="text: PointDesciption()"></td>
<td>
<table style="width:100%;">
<thead><tr>
<th>Name</th><th>Description</th><th>Value</th><th></th>
</tr></thead>
<tbody data-bind="foreach: Params">
<tr>
<td data-bind="text: ParameterName"></td>
<td data-bind="text: ParameterDescription"></td>
<td data-bind="text: StringValue"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
Any ideas on IE8 work around?
EDIT:
To illustrate this problem on a simpler model, check out this fiddle http://jsfiddle.net/ericpanorel/nzKvb/
I figured that I am running into problems because I am using the "with" or "if" bindings. I read somewhere that this causes problems with IE8.
I used IE9, and if you use your developer tools to switch from IE9 to IE8, this Fiddle doesn't work properly anymore. This fiddle is actually derived from one of knockout's samples (http://knockoutjs.com/examples/gridEditor.html)
EDIT:
I updated the fiddle... http://jsfiddle.net/nzKvb/20/
It has something to do with short-hand closing of tags inside the nested containerless bindings
<!-- ko if: Allowed-->
<h2>
<span data-bind="text: Dummy"/> <===== This will bomb in IE8
</h2>
The jsFiddle had an extra comma at the end of the array, which IE8 was treating as a null object:
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"},
{ name: "HK 416", price: "2420.00"}, <-- HERE !!!
]);
ko.applyBindings(viewModel);
The fiddle works fine without the comma:
http://jsfiddle.net/XPMUA/
Not sure if this solves your underlying problem but at least the fiddle is working now :-)
The problem is here because
<!-- ko if: Allowed-->
Older IE versions can be picky about using JavaScript reserved words
for property names.
So you should write 'if'
Check Same problem in another link!
Just so you know, I'm new to html and CSS and I'm sorry if the question is stupid, but I have a problem that seems simple, and yet I've been searching for a solution for hours and couldn't find any. There are many forums discussing similar issues but none of the solutions applied to my particular issue. I have simplified the page as much as I could to isolate the problem and this is what I got:
As you can see, Google Chrome and Safari keep the first cell only as high as its content, exactly as I want it to be displayed. Firefox, however, arbitrarily stretches the cell to a random and unnecessarily long height.
What I have tried with no success so far:
Set the first cell height as "auto" (although I think this is already the default).
Set the first cell height as 1px
Set the "oi" td and/or tr height as "100%".
Set the first cell to "display:block;", which gave me an even more intriguing result:
http://i.stack.imgur.com/KqBUB.png
How can I specify that I want the cell only as high as its contents? If "auto" doesn't do that, what does? None of the other possible "height" values seem to do the trick. Does anyone have any idea why this happens and how to fix this problem?
Here's my code:
<html>
<body>
<table border="1">
<tr>
<td>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
You need two things:
1. A doctype.
2. Set the Td's height to 1px, content will expand the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td style="height: 1px;">
1st cell 1st cell<br/> <br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
Of course, if you want to do this with REAL / VALID html + CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
<!--
#column_left {
float: left;
width: 20%;
}
#column_middle {
float: left;
width: 60%;
}
#column_right {
float: left;
width: 20%;
}
.breaker {
clear: both;
}
.pad {
margin: 10px;
padding: 1px;
}
-->
</style>
<body>
<div id="container">
<div id="column_left">
<div class="pad">
<p>Left Column</p>
</div>
</div>
<div id="column_middle">
<div class="pad">
<p>Middle Content</p>
</div>
</div>
<div id="column_right">
<div class="pad">
<p>right content</p>
</div>
</div>
<div class="breaker"></div>
</div>
</body>
</html>
See how much cleaner that comes out? Put your styles in a stylesheet and this is reduced to VERY few lines of code for a basic layout.
It's kind of a hack, but a possible solution would be to set the height of the cell that's too long to 1, and then let the content push the height down.
<html>
<body>
<table border="1">
<tr>
<td height="1">
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
The following javascript, intended to open a new window and jump to a specified anchor, works great in IE. Unfortunately, in Firefox, it opens the window, but it doesn't jump to the anchor.
I've been struggling with this problem for a couple of days now (searches and modifications) to no avail.
If anybody has any insight as to how I can get this to work as intended in both IE and Mozilla browsers, I'd be forever grateful.
Here's the javascript function containing window.open() and the link calling the function containing window.open():
<html>
<head>
<script language=javascript>
function openPopupWindow_Why(sPopupUrl, sPopupLabel)
{
window.open(sPopupUrl, sPopupLabel, 'toolbar=no,resizable=yes,
scrollbars=yes,height=250,width=450', false);
return false;
}
</script>
</head>
<body>
<A onclick="openPopupWindow_Why('MyProfile_WhyAsk.htm#ethnicity', 'Why')"
href="javascript:void(0)" class="WhyAsk">Why do we ask?</a>
</body>
</html>
Here's the HTML anchor on the page that's opened by window.open():
<tr>
<td align="center">
<a name="#ethnicity"> </a>
</td>
</tr>
Try removing the # from the ethnicity anchor name like so:
<tr>
<td align="center">
<a name="ethnicity"> </a>
</td>
</tr>
Works in at least IE, Firefox and Chrome
In IE6, the expander graphic for the root node in the table is not showing up. If I position the mouse in the correct spot next the the root nodes text I can actually click the expander.
The expander does show up for all child nodes.
The odd thing is the examples at the TreeView site show the root expander image in IE6. I can't see the difference between the examples code and mine. I did a side by side comparison of the CSS for the elements in question and nothing jumps out at me.
I have no extra styling than the stylesheet that came with the plug-in provides.
<script type="text/javascript">
$(document).ready(function() {
$("#tree").treeTable();
});
</script>
-
<body>
<table id="tree">
<tr id="node-1">
<td>Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
Just for reference, since i ran into this trouble too...
The first parent image doesn't show because the space for the image to be is too small, so the treetable.css and treetable.js need to be modified.
In jquery.treeTable.js, change the line:
cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>');
To:
cell.prepend('<span class="expander"></span>');
And in jquery.treeTable.css, add the last two lines (margin-left and padding-left) to ".treeTable tr td .expander":
.treeTable tr td .expander {
background-position: left center;
background-repeat: no-repeat;
cursor: pointer;
padding: 0;
zoom: 1; /* IE7 Hack */
margin-left: -3px;
padding-left: 15px;}
°°°°°°°°°°°°°°°°°°°°°°°°°
I didn't Modify the Code, the above tip was taken from:
http://javathoughts.capesugarbird.com/2009/03/jquery-tree-table-for-wicket.html
-VicSan.
I agree with VicSan solution, although I prefer not to modify TreeTable source code (so I can upgrade it to future versions without need to make again my changes inside the new code). So I suggest you to simply add a padding-left in the style attribute of the first cell of the first row of your tree-table (the root):
<body>
<table id="tree">
<tr id="node-1">
<td style="padding-left: 19px">Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
</body>
I put 19px because it's the default, but, if you specified another value in the indent option (when you create the tree-table with .treeTable(...)), put that one.