#27478

@PD4ML wrote:

PD4ML does not support <tbody> tag. It simply ignores it.

So TBODY.ui-datatable-data condition makes the selector to fail.
As a workaround I would recommend to remove .ui-datatable-data from there.

.ui-datatable td, .ui-datatable .ui-datatable-data-empty td{
border-color:inherit;
border-style:solid;
border-width:1px;
padding: 4px 10px;
}

Here is the issue. Ok, I’m now able to correct it. Thanks a lot for your help.
Moreover, we use the 3.5.1 professional version. If we want update to the 3.7.0 one, do we have to pay it?

#27476

@PD4ML wrote:

In the HTML I see no any element of class ui-datatable-data-empty, so the selector always returns nothing.

If your concern is about borders of empty cells, it can be solved with

TABLE { empty-cells: show }

I made a mistake. The CSS part is the following:

.ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td{
border-color:inherit;
border-style:solid;
border-width:1px;
padding: 4px 10px;
}

With this one, it should work.

#27474

@PD4ML wrote:

Could you please also publish an HTML snippet, you want to apply the CSS to.

Also, to make sure the CSS selector does not work, try to temporarily add any obvious CSS property, like “color: red”.

The HTML page, I want to apply the CSS to is generated by using JSF and Primefaces.
Here is an extract:

<html>
<head>
<link type="text/css" rel="stylesheet" href="http://php.dsi.intra.foncia.net/devche/mantis-log/resources/foncia/skin.css"/>
<link type="text/css" rel="stylesheet" href="http://php.dsi.intra.foncia.net/devche/mantis-log/resources/foncia/skin2.css"/>
<link type="text/css" rel="stylesheet" href="http://devche:8080/mantis-log/resources/style.css"/>
<link type="text/css" rel="stylesheet" href="http://php.dsi.intra.foncia.net/partage/static/latest/css/template/styles.css"/>
</head>
<body class="yui-skin-sam">
<div class="dsi_tableau_sous_titre">ANNU - LdapAdmin - V1.3 - 20 févr. 2011 - 4 bug(s)</div>
<div id="formChange:j_idt30" class="ui-datatable ui-widget">
<div style="display: none;" id="formChange:j_idt30_paginatortop" class="ui-paginator ui-paginator-top ui-widget-header ui-corner-tl ui-corner-tr">
<span class="ui-paginator-current" id="yui-pg0-0-page-report">(1 de 1)</span>
<span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled" id="yui-pg0-0-first-span">
<span class="ui-icon ui-icon-seek-first">First</span>
</span>
<span class="ui-paginator-previous ui-state-default ui-corner-all ui-state-disabled" id="yui-pg0-0-prev-span">
<span class="ui-icon ui-icon-seek-prev">Prev</span>
</span>
<span class="ui-paginator-pages" id="yui-pg0-0-pages">
<span class="ui-paginator-page ui-state-default ui-corner-all ui-paginator-current-page ui-state-active">1</span>
</span>
<span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled" id="yui-pg0-0-next-span">
<span class="ui-icon ui-icon-seek-next">Next</span>
</span>
<span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled" id="yui-pg0-0-last-span">
<span class="ui-icon ui-icon-seek-end">Last</span>
</span>
<select title="Rows per page" class="ui-paginator-rpp-options" id="yui-pg0-0-rpp">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
<table>
<thead>
<tr>
<th id="formChange:j_idt30:j_idt31" class="ui-state-default" style="text-align: center;">Identifiant</th>
<th id="formChange:j_idt30:j_idt33" class="ui-state-default">Résumé</th>
<th id="formChange:j_idt30:j_idt36" class="ui-state-default" style="text-align: center;">Statut</th>
<th id="formChange:j_idt30:j_idt38" class="ui-state-default" style="text-align: center;">Ciblée</th>
<th id="formChange:j_idt30:j_idt40" class="ui-state-default" style="text-align: center;">Fixée</th>
<th id="formChange:j_idt30:j_idt42" class="ui-state-default" style="text-align: center;">Création</th>
<th id="formChange:j_idt30:j_idt44" class="ui-state-default" style="text-align: center;">MAJ</th>
</tr>
</thead>
<tbody id="formChange:j_idt30_data" class="ui-datatable-data">
<tr id="formChange:j_idt30_row_0" class="ui-widget-content ui-datatable-even">
<td style="text-align: center;">18950</td>
<td>Réinitialisation du mot de passe TW de certains comptes génériques hors-service</td>
<td style="text-align: center;">résolu</td>
<td style="text-align: center;">V1.3</td>
<td style="text-align: center;">V1.3</td>
<td style="text-align: center;">31 janv. 2011</td>
<td style="text-align: center;">2 mars 2011</td>
</tr>
<tr id="formChange:j_idt30_row_1" class="ui-widget-content ui-datatable-odd">
<td style="text-align: center;">19390</td><td>
</tbody>
</table>
<div style="display: none;" id="formChange:j_idt51_paginatorbottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bl ui-corner-br">
<span class="ui-paginator-current" id="yui-pg1-1-page-report">(1 de 1)</span>
<span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled" id="yui-pg1-1-first-span">
<span class="ui-icon ui-icon-seek-first">First</span>
</span>
<span class="ui-paginator-previous ui-state-default ui-corner-all ui-state-disabled" id="yui-pg1-1-prev-span">
<span class="ui-icon ui-icon-seek-prev">Prev</span>
</span>
<span class="ui-paginator-pages" id="yui-pg1-1-pages">
<span class="ui-paginator-page ui-state-default ui-corner-all ui-paginator-current-page ui-state-active">1</span>
</span>
<span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled" id="yui-pg1-1-next-span">
<span class="ui-icon ui-icon-seek-next">Next</span>
</span>
<span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled" id="yui-pg1-1-last-span">
<span class="ui-icon ui-icon-seek-end">Last</span>
</span>
<select title="Rows per page" class="ui-paginator-rpp-options" id="yui-pg1-1-rpp">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
<script type="text/javascript">widget_formChange_j_idt51 = new PrimeFaces.widget.DataTable('formChange:j_idt51',{url:'/mantis-log/changelog.xhtml',formId:'formChange',paginator:new YAHOO.widget.Paginator({rowsPerPage:5,totalRecords:4,initialPage:1,containers:['formChange:j_idt51_paginatortop','formChange:j_idt51_paginatorbottom'],template:'{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}',rowsPerPageOptions : [5,10,15],pageReportTemplate:'({currentPage} de {totalPages})',alwaysVisible:false})});</script>
</body>
</html>

Moreover, I’m quite sure that the CSS is not applied because the cell border doesn’t appear.

#27472

@PD4ML wrote:

We had no reason not to include it, so PD4ML does support the feature.

So it seems to be the same problem that the first post of this topic.
My CSS definition is the following:

.ui-datatable .ui-datatable-data-empty td {
border-color:inherit;
border-width: 1px;
border-style: solid;
padding:4px 10px 4px 10px;
}

It seems to be OK with PD4ML but it doesn’t work.
If I put the class directly in the HTML element, it works.

Do you have any idea about this issue?
Thanks.
Clemiou

#27470

Pd4ML does support CSS selectors like “.tableclass td”.

Is this always true with the last version?
Do you have a reason to not include this feature in PD4ML?

Thanks a lot for you answers.

[Author]

Posts