[xsl] Combining XSLT and CSS

Subject: [xsl] Combining XSLT and CSS
From: Andrew Franz <afranz0@xxxxxxxxxxxxxxxx>
Date: Sat, 11 Mar 2006 11:51:01 +1100
I've learned so many useful things from other contributors to this list - that I thought it useful to share something I discovered.
Maybe it is covered in one of the excellent books available or somewhere in an FAQ - but I haven't see it, so here goes:


If I want to implement the usual "Previous Page" and "Next Page" buttons, then my XSLT might look something like this:
<td>
<input name="rowNo" type="hidden" value="{$rowNo}" readonly="true" />
<xsl:choose>
<xsl:when test="($rowNo &gt; 1)"><input type="image" src="{$gifPrev}" name="prev" /></xsl:when>
<xsl:otherwise><img src="{$gifSpace}" width="20" border="1" /></xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="($rowNo = $pageSize)"><input type="image" src="{$gifNext}" name="next" /></xsl:when>
<xsl:otherwise><img src="{$gifSpace}" width="20" border="1" /></xsl:otherwise>
</xsl:choose>
</td>
this replaces the "prevPage" button with an invisible "space" GIF when on page #1


The following solution combines CSS and XSLT for maximum readability and clarity:
1. In the CSS file, define the following:
input.showtrue {visibility: visible}
input.showfalse {visibility: hidden}


2. In the XSLT file, the above code simplifies to the following:
<td>
<input name="rowNo" type="hidden" value="{$rowNo}" readonly="true" />
<input type="image" class="show{boolean($rowNo &gt; 1)}" src="{$gifPrev}" name="prev" />
<input type="image" class="show{boolean($rowNo = $pageSize)}" src="{$gifNext}" name="next" />
</td>


The AVTs in the above evaluate to 'true' or 'false' and consequently are rendered as 'visible' or 'hidden' respectively.
CSS 'visibility' is used instead of 'display' because the browser will render the image inline - negating the need for a "Space" gif.
It also eliminates the "jitter" when the "Space" and "prevPage" images are not exactly the same size.


Current Thread