0

I´m currently working on an application in JSF 2.2 and RichFaces but I´m facing a little problem ... basically, I found myself in a situation where I need to generate a radio button (which I would like to generate using the "h:selectOneRadio" jsf tag) but where I need to apply different styles for each of the radio buttons that are generated with the "f:selectItem" tag. In my particular case, the style that I need to apply is an absolute position so that I can place each radio button in a custom position and not necessarilly in a row/column as it is provided by default.

The ideal would be to have something like this :

<h:selectOneRadio value="Red">
    <f:selectItem style="position:absolute; left: 0ex; top:0ex;" itemValue="Red" itemLabel="Color1 - Red" />
    <f:selectItem style="position:absolute; left: 20ex; top:20ex;" itemValue="Green" itemLabel="Color1 - Green" />
    <f:selectItem style="position:absolute; left: 40ex;top:40ex;" itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>

Looking at how JSF treats this tag, I have found that it generates a table where (depending on your choice) places n rows/columns each one with one radio item ... but it does not give any workaround to apply a custom style for this particular row/column that should not affect the rest of the columns ...

I have tried wrapping the "f:selectItem" tag by a but it does not work ... Any ideas?

Thank you in advance !!

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Andrés Monge Moreno
  • 379
  • 1
  • 8
  • You could maybe use jquery to index into the tables rows like http://stackoverflow.com/questions/9887534/get-an-element-by-index-in-jquery – Jaqen H'ghar Sep 03 '14 at 13:18
  • I have a hard time in understanding the functional requirement as the attempted CSS styles would position them diagonally from left top to right bottom. Didn't you mean that you want to position radio buttons vertically (in page direction) instead of horizontally (in line direction)? If so, does setting `layout="pageDirection"` do what you ultimately want? – BalusC Sep 03 '14 at 14:14
  • The jquery solution is not really applicable in my case ... as I am autogenerating this code and the actual position of each button is something I will read at runtime ... anyway as a very last solution, I could inject some javascript code to be executed in every DOM load ... but i dont feel it appropriate. For BalusC, I understand what does the layout att do, but ... what if I want them to be in diagonal position? That's my question here ;) – Andrés Monge Moreno Sep 03 '14 at 15:32
  • Oh really? :) Okay, nevermind then. Which of those dupes answers your question the best? http://stackoverflow.com/q/18389352, or http://stackoverflow.com/q/7435039, or http://stackoverflow.com/q/11255509 – BalusC Sep 03 '14 at 19:57
  • The tomahawk based solution works perfect ! Thank you BalusC ! – Andrés Monge Moreno Sep 04 '14 at 07:01

0 Answers0