Picklist (Radio Button) Field Not Expanding to Full Width in Multi Column Layout

User Experience
1

I am using the default form configuration with a field type set to Picklist (Radio Button). I expected the field to occupy the full width of the screen, even when the form is divided into two or three columns. However, this is not happening.

Picklist.png
Picklist.png2994×1774 287 KB

Could someone clarify:

  1. What could be the reason for this behavior?
  2. Is this the expected behavior in Pega default forms?
  3. Are there any recommended approaches to make the radio button field span the entire width?

Thank you in advance for your guidance.

2

@Arunkum@r: could yo help me understand what is wrong with your form. From print screen it looks like single column layout

3

@Kamil Janeczek
I expected the question shown in the above screenshot to occupy the full width of the screen, but instead, it is wrapping. Currently, I am using a three-column layout; however, I also tested with a single-column layout, and the behavior remains the same.

multi.png
multi.png864×877 34.8 KB

Source:

Sour.png
Sour.png1453×477 49.7 KB

4

@Arunkum@rI believe it is working as designed. Picklist take the whole row (so there will be no other control on right of it). Text is wrapped as according to WCAG we should avoid to wide columns of text. Please take a loon on other guidances here: What’s Up with Constellation Form Layout?  | Pega

5

@Kamil Janeczek I found an alternate solution to display the field in full width. I used the “Form Full Width (Number of columns = 1 and gridTemplateColumns = 100%)” component from the Constellation-UI-Gallery, and it looks very good now. Sharing this for others.

Sol.png
Sol.png3835×1755 426 KB