Label does not align when using long text on a p:selectOneRadio

Question

I'm trying to implement a simple interface using JSF and primefaces. I need a list of questions and, for each question, the user will be able to choose between different options. These options are quite long and I have problem with the allignement of the radio button.

The code for one of the questions is the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
    <h:form>
        <div class="ui-g">
            <div class="ui-g-1"></div>
            <div class="ui-g-10">
                <p:panelGrid columns="1" layout="grid"
                    styleClass="showcase-text-align-center">
                    <h2>Domanda 1</h2>
                    <p:selectOneRadio id="domanda1" layout="pageDirection">
                        <f:selectItem itemLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " itemValue="1" />
                        <f:selectItem itemLabel="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." itemValue="2" />
                        <f:selectItem itemLabel="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." itemValue="3" />
                        <f:selectItem itemLabel="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium" itemValue="4" />
                    </p:selectOneRadio>
                </p:panelGrid>
            </div>
        </div>
    </h:form>
</h:body>
</html>

The output that I get is the following:

As you can see, I have the label associated with the last radio button that is not aligned with all the others. Is there a way to solve this problem?

try adding `style="white-space:nowrap;"` its not perfect but it may help...or cause other issues — Melloware, Apr 08 '20 at 15:56
I improved your title and tagging. Please check the differences and keep these in mind — Kukeltje, Apr 08 '20 at 15:57
Does it work if not using a `p:repeat`? If not, please do not post int in the code. Learn about [mcve]'s. And play with the css to see what fixes it. — Kukeltje, Apr 08 '20 at 15:58
@Kukeltje thanks for the suggestions. I have the same problem also without the p:repeat — Paolopast, Apr 08 '20 at 16:04
@Melloware I tried but when I have very long options the text goes outside the box. And I don't want something like this — Paolopast, Apr 08 '20 at 16:05
try adding this style: .ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td { display: flex; }, [here](https://caniuse.com/#feat=flexbox) you can find which browser supports this feature — WoAiNii, Apr 08 '20 at 17:15
or, for a different result, this style: .ui-selectoneradio label { display: unset; } [here's](https://caniuse.com/#feat=css-unset-value) compatibility — WoAiNii, Apr 08 '20 at 17:22
@MatteoZanini where should i put the style attribute? in the selectOneRadio tag? — Paolopast, Apr 08 '20 at 17:23
look at [this](https://www.w3schools.com/css/css_howto.asp), you can use external or internal css solution — WoAiNii, Apr 08 '20 at 17:30
@MatteoZanini Thank you Matteo! I solved adding the style inside the xhtml! — Paolopast, Apr 08 '20 at 17:41
add also this style: .ui-selectoneradio label {word-break: break-all;} to manage wrapping of a single very long word — WoAiNii, Apr 08 '20 at 17:44
@MatteoZanini can you post your solution as the answer below so it can be accepted? — Melloware, Apr 08 '20 at 18:00

WoAiNii · Answer 1 · 2020-04-09T07:26:21.507

You can override Primefaces style to achieve that (look here How do I override default PrimeFaces CSS with custom styles? for a complete description):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
<style>
.ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
    display: flex;
}

.ui-selectoneradio label {
    word-break: break-all;
}
</style>
</h:head>
<h:body>
    <h:form>
        <div class="ui-g">
            <div class="ui-g-1"></div>
            <div class="ui-g-10">
                <p:panelGrid columns="1" layout="grid"
                    styleClass="showcase-text-align-center">
                    <h2>Domanda 1</h2>
                    <p:selectOneRadio id="domanda1" layout="pageDirection">
                        <f:selectItem
                            itemLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
                            itemValue="1" />
                        <f:selectItem
                            itemLabel="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                            itemValue="2" />
                        <f:selectItem
                            itemLabel="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
                            itemValue="3" />
                        <f:selectItem
                            itemLabel="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteur"
                            itemValue="4" />
                    </p:selectOneRadio>
                </p:panelGrid>
            </div>
        </div>
    </h:form>
</h:body>
</html>

I suggest you also to check caiuse, for browse compatibility of the used features.

Here's what's going on (please note that the actual behaviour could depends on pf version and if you're using a specific theme, here I'm taking components.css from pf 6.2 as example): Primefaces selectOneRadio create a table, so each radio button is in a cell that inherit the table-cell layout. The single radio button is write basically as two items, a div, that contain the input with type radio, and the label.

Both these tags inherit inline-block display, from pf css. Inline block is displayed in the same line if they fit, else they're put each on a line. Display flex can manage this situation, adapting the content to the space, see this for a better description.

Now you just need to manage the last worst scenario: a single word longer than your line. For that, you can use the word-break style. Here you can choose if you want to start a new line when a word start (break-word), or when you reach line end (break-all), see here for all options.

I think there's always different ways of achieve a layout, with css, so try some guides and test differents approach to keep learning.

If you want, Primefaces have also a version multi platform oriented, so responsive etc, you can see more here PrimeNG

score 1 · Accepted Answer · answered Jul 28 '20 at 11:51

1

The key is to change in the css style the display for initial:

body .ui-selectmanycheckbox.ui-widget label, body .ui-selectoneradio.ui-widget label {
    display: initial;
    vertical-align: middle;
    margin-top: 0;
}

answered Jul 28 '20 at 11:51

Pedro.jimenez

26
1

Label does not align when using long text on a p:selectOneRadio

2 Answers2

Linked