My question is pretty basic but cannot find an answer on Google. I do wonder if I missed something about the ice:column component.
I do use code like :
<ice:panelGrid columns="3">
<ice:column style="background-color: yellow;">
<ice:outputText value="..." />
</ice:column>
<ice:column>
// row content
</ice:column>
<ice:column>
// row content
</ice:column>
// other rows
</ice:panelGrid>
It seems that the column component has a style and styleClass attribute, however nothing is ever rendered in the HTML.
How do you apply a style to a perticular cell of a table with IceFaces ?
Thanks in advance for the answer.
Like as standard JSF <h:panelGrid> the <ice:panelGrid> has a columnClasses attribute which allows you to specify a comma-separated list of column classes which are to be applied subsequently on the columns. Also, in standard JSF <h:panelGrid>, the <h:column> is not supported. This is only suppored in <h:dataTable>. Instead, every direct child of <h:panelGrid> is treated as a single column, which can be just <h:outputText> or <h:panelGroup> if you have multiple components which need to go in a single column.
So, this should do:
<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
<ice:panelGroup>row 1 col 1</ice:panelGroup>
<ice:panelGroup>row 1 col 2</ice:panelGroup>
<ice:panelGroup>row 1 col 3</ice:panelGroup>
<ice:panelGroup>row 2 col 1</ice:panelGroup>
<ice:panelGroup>row 2 col 2</ice:panelGroup>
<ice:panelGroup>row 2 col 3</ice:panelGroup>
...
</ice:panelGrid>
which will generate
<table>
<tbody>
<tr>
<td class="col1">row 1 col 1</td>
<td class="col2">row 1 col 2</td>
<td class="col3">row 1 col 3</td>
</tr>
<tr>
<td class="col1">row 2 col 1</td>
<td class="col2">row 2 col 2</td>
<td class="col3">row 2 col 3</td>
</tr>
...
</tbody>
</table>
You can specify the style in the .col1, .col2 and .col3 classes the usual way.
.col1 {
background: yellow;
}
Related
I want to fuse a cell with the cell of the previous row in a shopping cart.
Here is what I want to do
Table rowspan
No problem for the first and last columns, I just use rowspan on cell 1 and 4 then hide cell 5 and 8, but how can I do the same for cells 3 and 7 ? I know I could use Javascript and appendTo the content of the cell 7 into the cell 3 then use rowspan on cell 3, but I'm wondering if it is possible to do that only with CSS.
My code looks like that right now :
<table>
<tr>
<td rowspan="2">Image</td>
<td>Title</td>
<td></td>
<td rowspan="2">Price</td>
</tr>
<tr>
<td>Description</td>
<td>Delete</td>
</tr>
</table>
I want the cell "Delete" to fill both rows, and I can't swap its content with the empty cell on the above TR.
I am parsing JSON data and displaying the data to a table using angular JS.
There are many table rows that I populated from JSON file using ng-repeat.
Status.winner could be of values 0 or 1.
If the value for the winner for the table row is 0, I would like to highlight Playerdata[0].playername for that table row to yellow color.
Else If the winner for the table row is 1, then I would like to highlight Playerdata[1].playername for that table row to yellow color.
How do I do that for each row with different values of winner, which can be 0 or 1?
<body ng-app="form-input" ng-controller="ctrl">
<table class="table table-bordered table-condensed ">
<caption>Recent Game Statistic</caption>
<tbody>
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"> </td>
<td ng-bind="status.Playerdata[0].Playername"> </td>
<td ng-bind="status.Playerdata[1].Playername"> </td>
</tr>
var app2 = angular.module('form-input', []);
app2.controller('ctrl', function($scope,$http) {
var url = "http://...JSON";
$http.get(url).success( function(data) {
$scope.recentGame = data.RecentGames;
});
})
Use ngClass:
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"></td>
<td ng-bind="status.Playerdata[0].Playername" ng-class="{winner: status.Winner == 0}"></td>
<td ng-bind="status.Playerdata[1].Playername" ng-class="{winner: status.Winner == 1}"></td>
</tr>
Then in CSS define .winner class styles the way you need. For example:
.winner {
background-color: yellow;
}
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.
Any suggestions?
Bootstrap has a few elements you might find helpful:
Use contextual classes to change row colors:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
http://getbootstrap.com/css/#tables-contextual-classes
Use contextual colors to change the color of text:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
http://getbootstrap.com/css/#helper-classes-colors
The disabled element is primary for form elements and buttons. Check that out here,
I've created a custom class table-inactive:
.table-inactive td {
background-color: #ececec;
color: #b9b9b9;
}
Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..
I.E.
<tr>
<td style="color:grey;">Sample Text</td>
<td><input type="text" disabled/></td>
</tr>
I have worked with Twitter Bootstrap a bit and did not see any of these features though.
Bootstrap 4 requires you to add "table-" to the class.
<tr class="table-danger">...</tr>
https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
I would like to assert that a table row contains the data that I expect in two different tables.
Using the following HTML as an example:
<table>
<tr>
<th>Table 1</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
</table>
<table>
<tr>
<th>Table 2</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>different data</td>
</tr>
</table>
The following assertion passes:
$this->assertElementPresent('css=table:contains(Table 1)');
However, this one doesn't:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1)');
And ultimately, I need to be able to test that both columns within the table row contain the data that I expect:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1):contains(Row 1 Col 2)');
$this->assertElementPresent('css=table:contains(Table 2) tr:contains(Row 1 Col 1):contains(different data)');
What am I doing wrong? How can I achieve this?
Update:
Sounds like the problem is a bug in Selenium when trying to select descendants.
The only way I was able to get this to work was to add an extra identifier on the table so I could tell which one I was working with:
/* HTML */
<table id="table-1">
/* PHP */
$this->assertElementPresent("css=#table-1 tr:contains(Row 1 Col 1):contains(Row 1 Col 2)");
This is probably due to a bug in the CSS selector library used by Selenium. As a workaround you might want to try the following:
css=table:contains(Table 1) > tbody tr:contains(Row 1 Col 1)
Details of the bug can be found here: http://jira.openqa.org/browse/SEL-698