I have a CSS style to make the background gray.
.team_not_selected {
background-color: #B0B0B0;
}
I'm displaying data from objects in a table format.
<table>
#For each item in model
<tr>
<th>item.Name</th>
<th>item.ModelNumber</th>
etc....
Next
</tr>
</table>
Each object has a variable called "IsSelected" which is a Boolean. I set that variable elsewhere. I want to apply the team_not_selected div to the tag if item.IsSelected = False. That way, if the record is grayed out if it is not selected.
In your code, looks like you want to add all rows as TableHeader (th), please verify.
For conditional CSS, try one of these:
IIf condition:
<div class="#IIf(item.IsSelected, "team_selected", "team_not_selected")">
If Condition:
#If (item.IsSelected) Then
<div class="team_selected">
Else
<div class="team_not_selected">
End if
Related
I am fairly new to do things in Angular so I might overlook something:
I am generating a multiple div rows with *ngFor. Each of the row has a toggle button and a hidden sub-div (and the sub-divs can also have hidden sub-divs).
What I want to try and do is to show and hide the sub-divs independently when clicking on the toggle button (and also the toggle button icon should change). I managed to get it working either with opening all divs at the same time or when clicking on one row-toggle it will open the sub-div.
But when I click on another it will close the previous one that was clicked and open the currently clicked on one.
I was thinking about using an array but that would only work for the first layer of divs and not for the nested ones (since I don´t know how many, initially).
Here some illustration of opened sub- and sub-sub divs:
rows rows
>AA -AA
>BB >aa
>CC -> >BB
>DD -CC
>FF -cc
c
>DD
-FF
>ff
<div *ngFor="hero of heroes">
{{ hero.name }}
<button (click)="hero.show = !hero.show">show/hide</button>
<div class="sub" *ngIf="hero.show">
more info here
</div>
</div>
Add some css to emphasize the sub section
You need accordion
try this:
You can make use of simple CSS and make it simple.
HTML
<table class="table">
<tbody>
<tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
<div (click)="getSub(game.label);">
<!-- use the uniqueId here -->
<td>{{game.date}}</td>
<td>{{game.label}}</td>
<td>{{game.score}}</td>
</div>
<table>
<tbody [ngClass]="{activetab: isActive(game.label)}">
<tr *ngFor="let subgame of game.sub">
<td>{{subgame.date}}</td>
<td>{{subgame.label}}</td>
<td>{{subgame.score}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
CSS
tr .activetab {
display: block !important;
}
TS
isActive(id) {
return this.selected === id;
}
getSub(id) {
//TODO//
this.selected = (this.selected === id ? null : id);
}
I think this should work fine.
I am using Umbraco 7.x
I need some thing like following In list Item generated using for each. alternating item need to give respective class.
So is their any was to determine even and odd row to give respective class name.
As following is my code for the same.
#foreach (var itemTblRows in #Model.Children)
{
<tr class="light">
<td>#itemTblRows.ABL_tableData1</td>
<td>#itemTblRows.ABL_tableData2</td>
<td>#itemTblRows.ABL_tableData3</td>
<td>#itemTblRows.ABL_tableData4</td>
</tr>
}
I will not like to use CSS and JS to do so, because in other case (with diff. lay out) it will not work.
You can do easily with the IsOdd and IsEven helper methods:
<tr class="#itemTblRows.IsOdd("odd","even")>
or
<tr class="#itemTblRows.IsEven("even","odd")>
Here's a simple CSS only approach to accomplishing the result you're looking for. First, add a class to the table these rows belong to:
<table class="striped">
#foreach (var itemTblRows in #Model.Children)
{
<tr>
<td>#itemTblRows.ABL_tableData1</td>
<td>#itemTblRows.ABL_tableData2</td>
<td>#itemTblRows.ABL_tableData3</td>
<td>#itemTblRows.ABL_tableData4</td>
</tr>
}
</table>
Then add in these CSS rules:
table.striped tr:nth-child(even) { background-color: grey; }
table.striped tr:nth-child(odd) { background-color: white; }
Then you add in your CSS as needed. The nth-child(n) selector allows you to select every nth child that is a match. Specifying odd or even allows you take select every odd child, or every even child.
Create a counter variable c which you will increment in each loop. In each loop perform a modulus (%) using 2 as the denominator. If the result is greater than 0 then it is odd otherwise even
var c = 1;
#foreach (var itemTblRows in #Model.Children)
{
var oddEvenClass = c % 2 > 0 ? "odd" : "even";
c += 1;
<tr class="light #oddEvenClass">
<td>#itemTblRows.ABL_tableData1</td>
<td>#itemTblRows.ABL_tableData2</td>
<td>#itemTblRows.ABL_tableData3</td>
<td>#itemTblRows.ABL_tableData4</td>
</tr>
}
I want my data to have an html that is rendered something like (imagine the headers are aligned above the values)
header1 header2 header3
List item 1
value111 value112 value113
value121 valueb122 valueb123
List item 2
value211 value212 value213
value221 valueb222 valueb223
I want the values to be part of the list block, so I can show/hide the content (collapse) on click. Further, I want the width of each 'column' to be dynamically decided, to accommodate the longest value (perhaps with a min width)
Unfortunately, the HTML table model is so simple that it does not let you enter headers for row groups, which seems to be what the list items would need to be, more or less. We need to fake a little: we form row groups with the tbody element and use the first row in a group as a group header. That row will contain the header in one cell that spans all columns.
The following example has minimal styling and one (rather clumsy) way of making the row group headers controls that can be used so switch off and on the display of data rows in the group. This is just a demonstration to show that such things are doable without mixing list markup with table markup (and, for that matter, without using list markup at all).
function toggleData(el) {
el.parentNode.parentNode.className =
el.parentNode.parentNode.className ? '' : 'hide';
}
tbody > tr:first-child > td:before {
content: '\2022';
padding-right: 0.25em;
}
tbody.hide > tr:not(:first-child) {
display: none;
}
<table border cellspacing=0>
<thead>
<tr><th>header1 <th>header2 <th>header3
</thead>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 1
<tr><td>value111 <td>value112 <td>value113
<tr><td>value121 <td>valueb122 <td>valueb123
</tbody>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 2
<tr><td>value211 <td>value212 <td>value213
<tr><td>value221 <td>valueb222 <td>valueb223
</tbody>
</tabe>
Terr!
HTML::Table has pretty good flexibility to form HTML-tables from perl data structures, but i did not found proper way how to have th-tags different than ordinary cells (td) in same column. Or let me rephrase: if i set column class, i'd like to set it only for data rows, not for header row.
use strict;
use warnings;
use HTML::Table;
my $table = new HTML::Table(
-head=> ['one', 'two', 'eleven'],
-data=> [ ['yki', 'kaki', 'kommi'],
['yy', 'kaa', 'koo'] ]
);
$table->setColClass(1, 'class');
$table->setSectionColClass('tbody', 0, 2, 'class2');
print $table;
And output is:
<table>
<tbody>
<tr><th class="class">one</th><th class="class2">two</th><th>eleven</th></tr>
<tr><td class="class">yki</td><td class="class2">kaki</td><td>kommi</td></tr>
<tr><td class="class">yy</td><td class="class2">kaa</td><td>koo</td></tr>
</tbody>
</table>
Output i am looking for:
<table>
<tbody>
<tr><th>one</th><th>two</th><th>eleven</th></tr>
<tr><td class="class">yki</td><td class="class2">kaki</td><td>kommi</td></tr>
<tr><td class="class">yy</td><td class="class2">kaa</td><td>koo</td></tr>
</tbody>
</table>
There are section level methods, but th belongs also in tbody. Tables may be pretty complex, so i'd like to avoid iterating over the heading row and hope to find a decent way. Is there?
Might be easies to just tweak your CSS a bit. Presumably you have something like this in your stylesheet:
.class { /* Some pretty stuff */ }
So just change the selector to adjust how the header and body cells are styled:
td.class { /* The styles you want applied to body cells go here. */ }
th.class { /* And the styles for header cells (if any) go here. */ }
If you don't want any styling applied to the header cells then include the td.class { } bit in your stylesheet and leave the th.class { } out; there's nothing wrong with having a CSS class attached to an element that doesn't match anything in your stylesheets.
So I have CSS to regulate the size of all the input types on the page. However I still notice some not being regulated in terms of length. The CSS I am using is this:
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 150px;
}
Here is a picture of the page using the above CSS:
As you can see there are still some minor length issues. But the main question I have is, the 'Payment Day' and 'Roll Day' fields on each component are within the same table cell so even if I put a between them the spacing doesn't equal the vertical spacing between everything else on the page. How do I regular vertical spacing between everything on the page?
EDIT:
Here is the ASP.NET Code:
<tr id="tr63">
<td id="td64">
Payment Day
</td>
<td id="td65" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td66" />
<td id="td67">
Payment Day
</td>
<td id="td68" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
</td>
</tr>
I want spacing BETWEEN the HTML Helpers to equal the spacing between everything else on the page. Hope this helps.
Try adjusting the margin instead of padding. input{margin-bottom: 5px;} padding is inside the border, margin is outside the border.
It be helpful if you could post the html for this. One approach you could use is to add padding to the fields. What is happening is that you have an invisible table border creating your spacing between all of your other fields (I think). Then when you have 2 form fields in the same table field you don't have the border.
Easiest solution would be to make them separate fields. You can make your "Roll Day" field rowspan="2" if you need it to appear floating between the 2 fields. Alternatively you could add a line to your css like:
input{margin-bottom: 2px;}
That would, of course, affect any input and probably isn't the best route, though.