p:calendar showOn="button" changes icon position on click

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
anabpz
Posts: 12
Joined: 25 Nov 2015, 19:32

13 Jan 2021, 13:06

Hello,

I'm using Primefaces with theme Barcelona since sometime ago. Recently when I updated my project to Primefaces version 8.0 I've found with an annoying UX/UI problem.

When an user clicks on button of p:calendar button itself changes its position to the left side of the input component. This also happens in Live Demo page, and this ocurrs on Chrome and Microsoft Edge browsers. In Firefox browser there's no problem.

Example code

Code: Select all

<p:calendar id="frmEFecha"
	value="#{beanName['fecha']}" showOn="button"
	required="true" navigator="true" pattern="dd/MM/yyyy"
	mask="true" mindate="01/01/1990" maxdate="31/12/2050" />
Live Demo of Theme Barcelona
https://www.primefaces.org/barcelona/forms.xhtml

Please, Could you correct this problem?

Thanks, regards.
PrimeFaces 11.0 | JSF 2.3 | Barcelona Theme 5.0.0

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

14 Jan 2021, 12:39

Hi,

@mert.sincan Could you please check this issue?

Best regards,

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

21 Jan 2021, 12:07

Hi,

Please try;

Code: Select all

.ui-fluid .ui-calendar, .ui-fluid .ui-calendar input {
    display: block;
}

anabpz
Posts: 12
Joined: 25 Nov 2015, 19:32

25 Jan 2021, 09:36

Thanks a lot! It works!
PrimeFaces 11.0 | JSF 2.3 | Barcelona Theme 5.0.0

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

29 Jan 2021, 02:13

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests