Re: [Xsltforms-support] How to highlight selected row within a repeat?
Brought to you by:
alain-couthures
Menu
▾
▴
Re: [Xsltforms-support] How to highlight selected row within a repeat?
|
From: Alain C. <ala...@ag...> - 2021-05-24 12:05:12
|
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
Hi Alessandro,
</div>
<div class="default-style">
<br>
</div>
<div class="default-style">
Since XSLTForms 1.5, CSS styling is to be based on custom elements.
</div>
<div class="default-style">
<br>
</div>
<div class="default-style">
The easiest way to determine what is possible, is to look at the elements with the browser debugger.
</div>
<div class="default-style">
<br>
</div>
<div class="default-style">
In this case, the selected repeat item has an xf-selected attribute set to true. So, a CSS rule like this one should be the one you are look for:
</div>
<div class="default-style">
<br>
</div>
<div class="default-style">
<div>
#files-repeat > xforms-repeat-item[xf-selected = "true"] {
</div>
<div>
color: red;
</div>
<div>
}
</div>
<div>
<br>
</div>
<div class="default-style">
Thank you for your feedback!
</div>
<div class="default-style">
<br>
</div>
<div class="default-style">
--Alain
</div>
</div>
<blockquote type="cite">
<div>
Le 24/05/2021 13:27, Alessandro via Xsltforms-support <xsl...@li...> a écrit :
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Steven and Ralph, thanks, but as I'm still not able to obtain the desired style effect, I give you a wider sight on my code.
<br>
</div>
<div>
<br>
</div>
<div>
I'm currently using XSLTForms 1.5.2 with exist-db. After extracting my data I put them within a variable, just to have the possibility of adjusting the date format for an easier Italian reading. Then I create an instance to contain the data. The displaying table enclosed within a repeat is intended to present the user with links to be used for opening the correlated files.
<br>
</div>
<div>
<br>
</div>
<div>
let $form :=
<br>
</div>
<div>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xmlns:xf="<a href="http://www.w3.org/2002/xforms">http://www.w3.org/2002/xforms</a>" xmlns:ev="<a href="http://www.w3.org/2001/xml-events">http://www.w3.org/2001/xml-events</a>" xmlns:xs="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" xmlns:xsi="<a href="http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance</a>">
<br>
</div>
<div>
<head>
<br>
</div>
<div>
<link rel="stylesheet" type="text/css" href="resources/css/xsltforms_style.css" />
<br>
</div>
<div>
<script src="resources/data/my_javascripts.js"/>
<br>
</div>
<div>
<br>
</div>
<div>
<style type="text/css">
<br>
</div>
<div>
<!--/*--><css><![CDATA[/**/
<br>
</div>
<div>
/*]]>*/<!--/*--></css><!--*/-->
<br>
</div>
<div>
</style>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:model>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:instance id="files">
<br>
</div>
<div>
<data xmlns="">{$directory_files}</data>
<br>
</div>
<div>
</xf:instance>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:instance id="URL-container" xmlns="">
<br>
</div>
<div>
<URL />
<br>
</div>
<div>
</xf:instance>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:instance id="del-row-data" xmlns="">
<br>
</div>
<div>
<data>
<br>
</div>
<div>
<file_name/>
<br>
</div>
<div>
<row_num/>
<br>
</div>
<div>
</data>
<br>
</div>
<div>
</xf:instance>
<br>
</div>
<div>
<br>
</div>
<div>
<!-- DELETE ACTION -->
<br>
</div>
<div>
<xf:submission ref="instance('del-row-data')" id="delete" method="post" action="action_confirmation_1.xq?action=deldirfiles&amp;arch_id={$arch_id}&amp;f_id={$cart_id}&amp;t_id={$tab_id}&amp;r_id={$row_id}&amp;alert_text=Si è sicuri di voler eliminare la riga selezionata?" instance="" replace=""/>
<br>
</div>
<div>
<br>
</div>
<div>
</xf:model>
<br>
</div>
<div>
</head>
<br>
</div>
<div>
<body>
<br>
</div>
<div>
<center>
<br>
</div>
<div>
<h2 style="color:red">File contenuti nella cartella: «{$directory}»</h2>
<br>
</div>
<div>
<br>
</div>
<div>
<br/>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:group ref="instance('files')">
<br>
</div>
<div>
<fieldset id="">
<br>
</div>
<div>
<div class="header-directory-files">
<br>
</div>
<div>
<table border="0">
<br>
</div>
<div>
<tr>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<div class="leftColumn">Apri file</div>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td style="width: 348px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<div class="leftColumn">Ubi</div>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td style="width: 3px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<div class="leftColumn">Data doc.</div>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<div class="leftColumn">Res.</div>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
</tr>
<br>
</div>
<div>
</table>
<br>
</div>
<div>
</div>
<br>
</div>
<div>
<xf:repeat nodeset="files/file" id="files-repeat">
<br>
</div>
<div>
<table border="0" >
<br>
</div>
<div>
<tr>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<xf:trigger submission="replace-form-with" appearance="minimal" class="url">
<br>
</div>
<div>
<xf:label>
<br>
</div>
<div>
<xf:output class="url" ref="link-text" style="width:400px;"/>
<br>
</div>
<div>
</xf:label>
<br>
</div>
<div>
<br>
</div>
<div>
<xf:action ev:event="DOMActivate">
<br>
</div>
<div>
<xf:setvalue class="url" ref="instance('URL-container')" value="concat('{$host}','exist/apps/DATI/', '{$trow_storage}','/',instance('files')/files/file[index('files-repeat')]/link-file-name,'.',instance('files')/files/file[index('files-repeat')]/link-est)" />
<br>
</div>
<div>
<br>
</div>
<div>
<xf:load ref="instance('URL-container')" />
<br>
</div>
<div>
</xf:action>
<br>
</div>
<div>
</xf:trigger>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td style="width: 20px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<xf:output style="width:10px;" ref="ubi"/>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td style="width: 20px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<xf:output style="width:60px;" ref="data1"/>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
<td style="width: 20px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<xf:output ref="resp"/>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
</tr>
<br>
</div>
<div>
</table>
<br>
</div>
<div>
<br>
</div>
<div>
</xf:repeat>
<br>
</div>
<div>
</fieldset>
<br>
</div>
<div>
<br>
</div>
<div>
<br/>
<br>
</div>
<div>
<br>
</div>
<div>
<table border="0">
<br>
</div>
<div>
<tr>
<br>
</div>
<div>
<td style="width: 15px;"/>
<br>
</div>
<div>
<td>
<br>
</div>
<div>
<xf:submit submission="delete">
<br>
</div>
<div>
<xf:label><div class="my_special_button" style="width: 150px;">Elimina riga selezionata</div></xf:label>
<br>
</div>
<div>
<xf:action ev:event="DOMActivate">
<br>
</div>
<div>
<xf:setvalue ref="instance('del-row-data')/file_name/text()" value="instance('files')/files/file[index('files-repeat')]/link-file-name" />
<br>
</div>
<div>
<xf:setvalue ref="instance('del-row-data')/row_num/text()" value="instance('files')/files/file[index('files-repeat')]/tr-id" />
<br>
</div>
<div>
</xf:action>
<br>
</div>
<div>
<xf:delete ev:event="DOMActivate" nodeset="."/>
<br>
</div>
<div>
</xf:submit>
<br>
</div>
<div>
</td>
<br>
</div>
<div>
</tr>
<br>
</div>
<div>
</table>
<br>
</div>
<div>
<br>
</div>
<div>
</xf:group>
<br>
</div>
<div>
</center>
<br>
</div>
<div>
</body>
<br>
</div>
<div>
</html>
<br>
</div>
<div>
let $xslt-pi := processing-instruction xml-stylesheet {'type="text/xsl" href="../xsltforms/xsltforms.xsl"'}
<br>
</div>
<div>
return ($xslt-pi,$form)
<br>
</div>
<div>
<br>
</div>
<div>
Many thanks
<br>
</div>
<div>
Alex
<br>
</div>
<div>
<br>
</div>
<div>
--
<br>
</div>
<div>
Inviato in modo sicuro con Tutanota. Ottieni la tua casella di posta elettronica crittografata e senza pubblicità:
<br>
</div>
<div>
https://tutanota.com
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
24 mag 2021, 11:16 da xsl...@li...:
<br>
</div>
<blockquote>
<div>
Hi all!
<br>
</div>
<div>
I'm probably not able to find the right CSS syntax for highlighting the current selected row within a repeat...
<br>
</div>
<div>
The only indications I can find are the following, but no matter where I write them (inside an external css file or directly within the xsltform) I'm not able to obtain any positive result.
<br>
</div>
<div>
<br>
</div>
<div>
.xforms-repeat-item-selected > * {
<br>
</div>
<div>
color: red; background-color: white; font-weight:bold; border-bottom:solid 5px #f2f0fb;
<br>
</div>
<div>
}
<br>
</div>
<div>
or:
<br>
</div>
<div>
.xforms-repeat-item-selected {color: blue; background-color: white;}
<br>
</div>
<div>
<br>
</div>
<div>
Thanks
<br>
</div>
<div>
Alex
<br>
</div>
<div>
<br>
</div>
<div>
--
<br>
</div>
<div>
Inviato in modo sicuro con Tutanota. Ottieni la tua casella di posta elettronica crittografata e senza pubblicità:
<br>
</div>
<div>
https://tutanota.com
<br>
</div>
</blockquote>
<div>
<br>
</div>_______________________________________________ Xsltforms-support mailing list Xsl...@li... https://lists.sourceforge.net/lists/listinfo/xsltforms-support
</blockquote>
</body>
</html>
|
