PDF Generating Tool Support Forum
HOME   Login   Register    Search

Board index > HTML/CSS rendering issues




  Previous topic | Next topic 
  Subject: Re: Nested CSS definitions not rendered
PD4ML   PostPosted: 22 Mar 2011, 15:46 
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".
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
Clemiou   PostPosted: 22 Mar 2011, 16:00 
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.
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
PD4ML   PostPosted: 22 Mar 2011, 16:14 
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 }
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
Clemiou   PostPosted: 22 Mar 2011, 16:26 
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.
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
PD4ML   PostPosted: 22 Mar 2011, 16:40 
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;
}
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
Clemiou   PostPosted: 22 Mar 2011, 16:44 
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?
[Quote]  
  Subject: Re: Nested CSS definitions not rendered
PD4ML   PostPosted: 22 Mar 2011, 16:48 
It depends on the issue date of your license. Please contact sales pd4ml com
[Quote]  

[Reply]     Page 2 of 2
  [ 17 posts ]  Go to page Previous  1, 2

cron
Copyright ©2004-10 zefer|org. All rights reserved. Bookmark and Share