CODEWITHSUNDEEP
cssjsf
Bacaneiro
Bacaneiro

Reputation: 33

It's possible to control how automatic generated labels of <f:selectItems> are displayed?

I have a dynamic list of options who is displayed in a <h:selectOneRadio>, and I want to control the labels layout so when the label are greater than one line it behaves like this :

Actual behavior:

    [ ] Label 1

    [ ] This label really 
    bugs me!

    [ ] Label 3

Desired behavior:

    [ ] Label 1

        Now...This is a nice     
    [ ] Label, Label, label, 
        Label, Label, label ...

    [ ] Label 3

Simplified HTML generated by JSF:

<table>
    <tbody>
        <tr>
            <td>
                <input id="radio 1" type="radio"> 
                <label for="radio 1"> Label 1 </label>
            </td>
            <td>
                <input id="radio 2" type="radio"> 
                <label for="radio 2"> This Label really bugs me! </label>
            </td>
            <td>
                <input id="radio 3" type="radio"> 
                <label for="radio 3"> Label 3 </label>
            </td>
        </tr>
    </tbody>
</table>

UPDATE: Sorry =X, I needed something slightly different...

Upvotes: 3

Views: 394

Answers (1)

Elias Dorneles
Elias Dorneles

Reputation: 23806

Assuming you are using layout="pageDirection" to lay the list vertically and you can have the list in fixed width, you can do something like this:

Disclaimer: Tested only in FF and Chrome

<style>
.select-one {
   width: 200px;
}
.select-one label {
   float: right;
   width: 170px;
}
</style>
...
<h:selectOneRadio value="#{myBacking.ola}" layout="pageDirection"
     styleClass="select-one">
        <f:selectItem itemLabel="This label really bugs me" itemValue="one" />
        <f:selectItem itemLabel="This label really, really, REALLY bugs me!!
                                 And let's add more stuff into this"
                      itemValue="two" />
</h:selectOneRadio>

This is how it renders in Firefox:

Rendering in Firefox Nightly

You may have to twidde with the values for the CSS width definitions a little bit, to make it to your taste.

Upvotes: 3

Related Questions