-
1. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
michpetrov Oct 19, 2015 5:04 AM (in response to arnieaustin)If you inspect the code with your browser it should show you what might be wrong with it, at the very least it will show you what '#{a4jSkin.headerGradientColor}' got generated as.
-
2. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
arnieaustin Oct 19, 2015 6:24 PM (in response to michpetrov)I'd like to, but when I look at the generated page, the data rows are missing from the file! I've tried everything, but nothing works. Where is the attach file link in this thing?
-
3. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
michpetrov Oct 20, 2015 7:22 AM (in response to arnieaustin)You need to switch to the advanced editor to attach files. How are you linking to the file? I can't reproduce the issue.
-
4. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
arnieaustin Oct 20, 2015 9:05 PM (in response to michpetrov)And where is this hidden switch for the Advanced Editor? It isn't under my preferences.
I was attaching my CSs file the old way:
<link href="#{appRootPath}/resources/css/general.css" rel="stylesheet" type="text/css" media="screen" ></link>
Which is part of a file that is included as the h:head part of my templates. So I moved it to my template footer file as:
<h:outputStylesheet library="css" name="general.css" /> and it is showing up in the generated page:
<link type="text/css" rel="stylesheet" href="/txgpmet/javax.faces.resource/general.css.xhtml?ln=css" />
But the grid isn't highlighted; and when I look at the page source, the data rows aren't even listed at all. I don't get that. The Query script for highlighting the tables is generating:
<span id="formInfoPersonList:panelDataGrid"><span
id="formInfoPersonList:tableStyle"><span
id="formInfoPersonList:j_idt138" style="display: none;"><script
type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr:odd","query":"addClass('table\u002Drow\u002Dodd')"} );</script></span><span
id="formInfoPersonList:j_idt139" style="display: none;"><script
type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr:even","query":"addClass('table\u002Drow\u002Deven')"} );</script></span><span
id="formInfoPersonList:j_idt140" style="display: none;"><script
type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr","query":"mouseover(function(){jQuery(this).addClass('table\u002Drow\u002Dactive')})"} );</script></span><span
id="formInfoPersonList:j_idt141" style="display: none;"><script
type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr","query":"mouseout(function(){jQuery(this).removeClass('table\u002Drow\u002Dactive')})"} );</script></span></span></span>
but doesn't appear to have any effect on the rows (the highlighting) but the on/off mouse over works.
-
5. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
arnieaustin Oct 20, 2015 9:55 PM (in response to arnieaustin)I thought I had tried this, but between this:
.table-row-odd {
background-color: #{a4jSkin.headerGradientColor};
color: #{a4jSkin.generalTextColor};
}
and this:
<rich:jQuery selector="table[id$='#{tableName}'] tbody tr:odd" query="addClass('table-row-odd')" /> <rich:jQuery selector="table[id$='#{tableName}'] tbody tr:even" query="addClass('table-row-even')" /> I got it working. But I had to swap the odd/even style values because RF is treating the table header row as a data row an applying the style on the row right below the header, which is wrong.
-
6. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
michpetrov Oct 21, 2015 4:40 AM (in response to arnieaustin)And where is this hidden switch for the Advanced Editor? It isn't under my preferences.
it's in the reply window:
<link href="#{appRootPath}/resources/css/general.css" rel="stylesheet" type="text/css" media="screen" ></link>
This won't work, in order for the EL to resolve the file has to go through the resource servlet, i.e. you have to use h:outputStylesheet. (You could make the link look like "#{root}/javax.faces.resource/general.css.jsf?ln=css" but that won't resolve the current skin properly)
But the grid isn't highlighted; and when I look at the page source, the data rows aren't even listed at all.
I don't understand, what do you mean by "data rows aren't listed"? If you're trying to highlight the rows on mouseover use the pseudoclass :hover in your CSS, no need doing it by toggling classes with jQuery.
-
7. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
arnieaustin Oct 22, 2015 9:05 PM (in response to arnieaustin)I thought I had tried this setup already, but I got it working:
CSS styles
.table-row-odd {
background-color: #{a4jSkin.headerGradientColor};
color: #{a4jSkin.generalTextColor};
}
.table-row-even {
}
DATA TABLE - no rowClasses parameter any more
JQuery include for related pages:
<a4j:outputPanel id="tableStyle">
<rich:jQuery selector="table[id$='#{tableName}'] tbody tr:odd" query="addClass('table-row-odd')" />
<rich:jQuery selector="table[id$='#{tableName}'] tbody tr:even" query="addClass('table-row-even')" />
<rich:jQuery selector="table[id$='#{tableName}'] tbody tr"
query="mouseover(function(){jQuery(this).addClass('table-row-active')})" />
<rich:jQuery selector="table[id$='#{tableName}'] tbody tr"
query="mouseout(function(){jQuery(this).removeClass('table-row-active')})" />
</a4j:outputPanel>
and in the page with the data table:
<ui:include src="/includes/tableStyle.xhtml" >
<ui:param name="tableName" value="infoPersonListTable" />
</ui:include>