p:datepicker formatting issue

UI Components for JSF
Post Reply
DaBe1812
Posts: 17
Joined: 11 Jun 2021, 14:32

11 Jun 2021, 14:50

Hi,

I'm relativly new to Primefaces. I'm using version 10.0.

Now I have a style issue with the datepicker-component.

Code: Select all

<p:datePicker id="dataDate" value="#{dashboardHandler.range}" showIcon="true" 
				        	selectionMode="range" inline="true" maxdate="#{dashboardHandler.maxDate}" 
				        	locale="de" pattern="dd.MM.yyyy" showButtonBar="true" numberOfMonths="3"
				        	style="max-width:500px"/>
This is the Code for the component and it isn't scaling the columns and the font size.
So the component itself is 500px width but the days show up besides the component.

https://ibb.co/cTXp4Pv
Image

How can I make the datepicker component smaller.

Best regards
Daniel

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

11 Jun 2021, 19:42

You most likely need to tweak the CSS and shrink the padding etc.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

DaBe1812
Posts: 17
Joined: 11 Jun 2021, 14:32

11 Jun 2021, 22:47

Nice suggestion, which tag should I tweek. It's not easy to find the correct one in generated html.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

12 Jun 2021, 14:55

Try adding this CSS.

Code: Select all

body .ui-datepicker .ui-datepicker-calendar td {
    padding: 0rem !important;
}
That removes the padding from the cells and shrinks the DatePicker significantly.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 18 guests