Radio button text not lining up properly

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

23 Jan 2022, 04:46

Hi,
I'm wondering if you could suggest some CSS to fix this issue:
Image
Link to image: https://www.dropbox.com/s/anzdf0h1jhk4e ... t.JPG?dl=0

I would like the text of the lower radio button to line up like it does for the upper radio button. I'm using Harmony 4.0, Primefaces 11.0 RC2 and Java 8. Thank you so much in advance!

Here is the code I'm using:

Code: Select all

		                   		<p:repeat var="assessmentQuestionResponse" value="#{assessmentQuestionare.assessmentQuestionResponses}">
		                   			<h6><b><h:outputText value="#{assessmentQuestionResponse.assessmentQuestionTemplate.sortOrder + 1}) #{assessmentQuestionResponse.assessmentQuestionTemplate.description}" /></b></h6>
		
									<div class="p-grid" >
									    <div class="p-col-12">
		                    				<p:selectOneRadio id="selectedResponseId" value="#{assessmentQuestionResponse.selectedResponse}" label="#{assessmentResponse.label}" converter="#{assessmentResponseTemplateConverter}"
		                    					layout="responsive" columns="3"
		                    					style="vertical-align: text-bottom"
		                    					rendered="#{memberIntake.isAssessmentEditable(memberIntake.memberAssessment)}">
		                    					<f:selectItems id="assessmentResponseTemplateId" value="#{assessmentQuestionResponse.assessmentQuestionTemplate.assessmentResponseTemplates}" var="item" itemValue="#{item}" itemLabel="#{item.label}" />
			                    			</p:selectOneRadio>
			                    			<h:outputText value="#{assessmentQuestionResponse.selectedResponse.label}" rendered="#{!memberIntake.isAssessmentEditable(memberIntake.memberAssessment)}"/>
			                    		</div>
									</div>
		                   		</p:repeat>
		                   	</p:tab>
		                   </p:accordionPanel>
		
		            </p:tab>

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Feb 2022, 15:47

Hi,

Could you please try the following CSS code;

Code: Select all

body .ui-selectoneradio > .ui-g > div {
     display: flex;
}
Best Regards,

tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

03 Feb 2022, 02:02

Works like a champ! Thank you :-)

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

03 Feb 2022, 02:32

Glad to hear, thanks a lot for the update!

Post Reply

Return to “Harmony - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests