Conditionally change color of angularjs element? - css

Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>

This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}

Related

unwanted empty cells on rows inside table with inline-block display

I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>

using css to color the background of specific areas of tds

Hi I'm trying to colour the tds of my table, but I want to specifically colour the background text within the td instead of the whole block. Is this possible ? I currently can target the images correctly but the text is a bit tricky.. http://jsfiddle.net/8gr2q5vm/3/
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday">Birthday: 1/1/1921 </td>
<td class="name">Name: barry</td>
</tr>
</table>
Wrap your text in a span and then style your span element.
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday"><span style="background-color: grey;">Birthday: 1/1/1921</span></td>
<td class="name"><span style="background-color: grey;">Name: barry</span></td>
</tr>
</table>
It would be better if you would have an external CSS file. And then you could import it and do some general styling like this:
td img, td span {
background-color: grey;
}
.text {
background: #ff3300;
}
<table>
<td style="background-color: grey;">
<img class="picture" src="#"></img>
</td>
<td class="birthday"><span class=text>Birthday: 1/1/1921</span>
</td>
<td class="name"><span class=text>Name: barry</span>
</td>
</tr>
</table>

White space between td in table in gmail

I have a table and I send it as html on gmail but there are white gaps in it. It's due to gmail, I suppose. There is white space between two td.
How to remove it?
My code is:
<table>
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>
//other code
</table>
There is default cell spacing in tables. Set cellspacing="0" in table.
<table cellspacing="0">
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>//other code
</table>
Here is the DEMO

How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

The working version of the html table generated markup with css is here:
http://jsfiddle.net/nexU/JkUCQ/1/
As you can see all I need is to set these align and width styles for those 3 specific TD tags on a external css and override the ones that are automatically generated by asp control.
Thanks in advance for your help.
/*
I want 1st pagerRow TD to have width 10%
I want 2nd pagerRow TD to have width 80%
I want 3rd pagerRow TD to have width 10%
*/
/------------style.css------------/
.pagerRow
{
background: #3D6AA2;
font-weight: normal;
color: #fff;
text-align: left;
height: 30px;
}
.pagerRow td
{
border: solid 1px red;
}
/------------ part of html generated by control------------/
<table id="mainContacts" class="contactsBase" cellspacing="0" border="1" style="width: 100%;">
<tbody>
<tr class="header_row">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="pagerRow" align="center">
<td colspan="5">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="left" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
</td>
<td align="center" width="50%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
<p> 1,2,3,4,5 </p>
</td>
<td align="right" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Working fiddle: http://jsfiddle.net/JkUCQ/4/
(updated based on your new input)
Add this to your CSS:
.pagerRow tr td:nth-child(1) {
width:10% !important;
}
.pagerRow tr td:nth-child(2) {
width:80% !important;
}
.pagerRow tr td:nth-child(3) {
width:10% !important;
}

How to place a div on right side of cascading tables - CSS

I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>

Resources