selectOneMenu and ui-inputgroup inside panel or fieldset

[vasilis.kleanthous]

Hello,

We noticed a problem with the height of specific components when they are placed inside a panel or a fieldset.
More specifically, the selectonemenu component's height is bigger when inside a panel or fieldset compared to inputtext components.
In addition, there is a problem with the input group element, the icon span height is bigger than the input text.
Any ideas?

[mert.sincan]

Hi,

I couldn't replicate it. Could you please attach a sample page for us to replicate?

Best Regards,

[vasilis.kleanthous]

Try adding the code below in sample.xhtml.
You will see that the height of the selectOneMenu and span class="ui-inputgroup-addon" is bigger than the rest.

Code: Select all

                           
         <p:fieldset id="testFieldset" legend="Test" style="margin-bottom:20px">

		<p:panelGrid columns="4" columnClasses="ui-grid-col-4,ui-grid-col-4,ui-grid-col-4,ui-grid-col-4" layout="grid" styleClass="ui-panelgrid-blank form-group" style="border:0px none; background-color:transparent;">

			<p:fragment>
			            <div class="ui-inputgroup">
			                    <span class="ui-inputgroup-addon">
				                        <i class="fa fa-user"></i>
			                    </span>
			                  <p:autoComplete id="test" completeMethod="#{autoCompleteView.completeText}" />   
				  </div>
			</p:fragment>
								
	                <p:selectCheckboxMenu id="test2" label="Cities">
	                	<f:selectItems value="#{checkboxView.cities}" />
	                </p:selectCheckboxMenu>
	
	               <p:selectOneMenu id="test3">
	                                    <f:selectItem itemLabel="Select One" itemValue="" />
	                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
	                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
	                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
	                </p:selectOneMenu>
	                                
	                <p:inputText id="test4"/>
		</p:panelGrid>
	</p:fieldset>

[vasilis.kleanthous]

The following css rules seem to fix the issue.

Code: Select all

 
body .ui-fieldset .ui-fieldset-content {
    line-height: inherit !important;
}

body .ui-accordion .ui-accordion-content {
    line-height: inherit !important;
}

body .ui-panel .ui-panel-content {
    line-height: inherit !important;
} 

[mert.sincan]

Thanks a lot for the sample! Fixed for the next version. Please use for now;

Code: Select all

body .ui-fieldset .ui-fieldset-content {
   line-height: normal;
}