Layout is broken with Calendar Widget with button

[Klenkes]

Does anyone have a tip for me, why the layout is broken when I use<p:calendar showOn="button"/> ?
Without the button, everything is fine.

[mert.sincan]

I couldn't replicate it. Please see; https://www.primefaces.org/ultima/forms.xhtml

Also, the input fields look different on your side. Do you have them.css in your project? Do you get an error in browser console?

[Klenkes]

There are no errors in browser console.

Yes, I have some customization. For example i changed the variables fontSize (11px) and lineHeight (14px).
The input fields look different because I changed the border-width of .ui-inputfield.

I asked this question with the hope that someone could give me a hint where I could look for the problem.

[mert.sincan]

Maybe, you can look position of the calendar button with browser inspector.

[Klenkes]

With this snippet I can replicate it with the standard Ultima css files:

Code: Select all

<div class="card">
	<h:form>
		<p:panelGrid columns="4" layout="grid" styleClass="ui-panelgrid-blank form-group">
						
			<p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">
				<p:outputLabel for="_test1" value="Test 1" />
				<p:inputText id="_test1" />
			</p:panelGrid>						
						
			<p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">
				<p:outputLabel for="_test2" value="Test 2" styleClass="name" />
				<p:calendar id="_test2" showOn="button" />
			</p:panelGrid>
					
			<p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">
				<p:outputLabel for="_test3" value="Test 3" styleClass="name" />
				<p:inputText id="_test3" />
			</p:panelGrid>
					
			<p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">
				<p:outputLabel for="_test4" value="Test 4" />
				<p:inputText id="_test4" />
			</p:panelGrid>	
			
		</p:panelGrid>
	</h:form>
</div>

[mert.sincan]

I couldn't replicate this issue with your sample codes. Which PrimeFaces and Ultima version are you using? Also, did you try it in our sample project?