I have a collection of tables nested within each other and background colors that are applied to each <td> in each row. I would ideally like to set the background as transparent on those <td> elements that themselves contain a child table, but I cannot identify how I'd specify this in SASS.
For example, I might have something like the following:
<table>
<tbody>
<tr>
<th>Data Point</th>
<!-- This should be styled with a red background -->
<td>0.025</td>
</tr>
<tr>
<th>Data Point</th>
<!-- This should be styled with a transparent background since it contains a table -->
<td>
<table>
<tbody>
<tr>
<th>Sub-point</th>
<!-- This should styled with a red background -->
<td>0.75</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I can just have a naive selector like the following to apply the background on my td elements:
td {
background: #ff0000;
}
But it's not clear how I might then modify this (without adding another class to everything) to set the background to transparent if the <td> contains a <table>.
I'm ideally looking to avoid all use of JavaScript and only handle this through SASS.
Attempt #1
At first, the pseudo-class :has() looked promising, but the guidance in this issue suggests it cannot be used in this scenario.
Attempt #2
I could just specify a new class on the <td> containing the nested element and override the background style from there, but this isn't as clean an approach. I'll reserve this as the fallback solution, but a selector-based approach would be preferred.
Is this even possible?
I have allowedcontent=true which is working and allowing me to have attributes in my opening tags; however, CKEdtior is still removing the closing tag attributes. I am using the editor to allow modification of simple Handlebars templates that use {{each}} and {{/each}}. The issue comes when using this with a table and wanting to repeat my rows.
For example, I have the following HTML entered into source:
<table>
<tr data-each={{each Person}}">
<td class="col-student-id">{{Identifier}}</td>
<td class="col-name">{{Name}}</td>
</tr data-each="{{/each}}">
</table>
When I click out of source, it removes the attribute on my closing tr tag.
Is there anyway to force CKEditor to not remove this attribute? If not, does anyone know of a way to allows me to use something like this:
<table>
{{each Person}}
<tr>
<td class="col-student-id">{{Identifier}}</td>
<td class="col-name">{{Name}}</td>
</tr>
{{/each}}
</table>
When I try the above example, it is reformatted to be:
<section>{{each Person}} {{/each}}
<table>
<tr>
<td class="col-student-id">{{Identifier}}</td>
<td class="col-name">{{Name}}</td>
</tr>
</table>
Your input source code is invalid - closing tags cannot have attributes in HTML, so CKEditor ignores them. Read more in CKEditor HTML Autocorrection Issue.
I'm using the Razor view engine with MVC 3 and I'm trying to make even and odd rows have different classes in a table.
So far I've got this
#{ var odd = true; }
#foreach(var userLot in Model) {
if (!odd) {
<tr id="lot#userLot.Id" class="even">
else
<tr id="lot#userLot.Id" class="odd">
}
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
#{ odd = !odd; }
}
This is giving me endless trouble with the stupid view engine unable to figure out what is markup and what is code. I've tried wrapping the tr opening tags in a text directive, but then the stupid view engine moans about the closing tr tags. If I then wrap the closing tr tag in a text directive the stupid view engine moans that the text directive has no opening tag.
Just to be clear, this
<text></ tr></text>
gives an error that the text tag has no matching opening tag. Lovely.
How do I write this so that Razor doesn't give an error?
Please don't recommend a JavaScript solution, I'm trying to get around the Razor issues here.
How about this:
#{ var odd = true; }
#foreach(var userLot in Model) {
<tr id="lot#(userLot.Id)" class="#(odd ? "odd": "even")">
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
odd = !odd;
}
#( ... ) is a valid and very useful statement.
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.
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.