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.
Related
I am making HTML Emailer.
The issue i am facing is that , when i see the output of my code in Outlook, then
Register Online text gets down in the outlook.
like Register in one line and Online in new line.
<table cellspacing="0" cellpadding="0" border="0" style=";border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: transparent;">
<tbody><tr>
<td valign="middle" height="40" align="center" class="main-bg-color" style=" background: #ffee00;color: black;display: block;padding-left: 20px;padding-right: 20px;!important; width:100px; cursor: pointer;">
<div class="modtxt"><span class="wrap_textbox"><a style="color: black;text-align: center; display:block; text-decoration: none;-webkit-text-size-adjust: none;font-size: 10px;line-height: 40px;text-transform:uppercase;font-family: \'proxima_novasemibold\', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;">Register Online</span></a></span></div>
</td>
</tr>
</tbody></table>
How can I solve it?
Thank You.
I'm not entirely sure what you want to do, but if it's make sure that "register online" doesn't ever break onto two lines, then the easy solution for Outlook is to use a non-breaking space character ( ) rather than a space.
REGISTER ONLINE
This should solve that particular issue.
I am able to use webflow with ajax using POST, but not with GET.
I have a parent object at the top of my page. I have a list of potential children at the bottom of the page. The user selects the "add" link by a potential child to add to the parent.
Full formed html is as follows:
<tr>
<td>Add</td>
<td>Advanced French</td>
</tr>
<tr>
<td>Add</td>
<td>Algebra One</td>
</tr>
However, this refreshes the whole page. How do I make this an ajax call so I just refresh the one fragment (i.e., the parent's specified children).
NOTE: My question is about forming the call to webflow. I know how to render the result
Here's the answer to the question asked here. I am not sure whether the javascript params fragments argument is necessary as the fragments to render are specified in webflows "render fragments." The function seems to work without this argument.
<table id="bodyInnerTable"
style="border: 1px solid #007589; width: 100%; vertical-align: top">
<tr>
<td id="bodyMainCellHead" colspan="2" th:text="#{label.availabletuts}">Name</td>
</tr>
<!-- Iterate through the children (retrieved from db and held in bean as TreeMap)
Each <a> tag must have a unique th:id. The name attribute applies to all children in list
-->
<tr th:each="tut : ${vwNewTestType.tutMap}" th:if="${vwNewTestType.tutMap.size() > 0}">
<td><a th:id="${tut.value}" name="addtutname"
th:href="#{'~' + ${flowExecutionUrl}(_eventId=addtut, tutid=${tut.value},tutname=${tut.key})}">Add</a></td>
<td th:text="${tut.key}">id</td>
</tr>
</table>
<!-- dojo .forEach will then allow for identification of which element is clicked and the webflow transition on=""addtut" is called-->
<script type="text/javascript">
dojo.query("a[name=addtutname]").forEach(function(element)
{
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: element.id,
event: "onclick"
//params: { fragments:"s2,s4"}
}))
});
</script>
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;
}
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>
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.