question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePicker: overlay-display-issue when used inside accordionPanel (or other containers) or inside a dialog

See original GitHub issue

1) Environment

  • PrimeFaces version: 7.0
  • Does it work on the newest released PrimeFaces version? Version? No, 7.0
  • Application server + version: does not matter
  • Affected browsers: does not matter

2) Expected behavior

p:calendar does it the right way grafik

3) Actual behavior

p:datePicker fails grafik

4) Steps to reproduce

Put p:datePicker inside a p:accordionPanel.

5) Sample XHTML

<p:accordionPanel>
	<p:tab title="Calendar and DatePicker">
		<p:datePicker showIcon="true" label="DatePicker" />
	
		<p:panel>
			The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
			His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
			Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, 
			but given to ruthless violence whenever anything stands against the good of the family.
		</p:panel>
			
		<p:calendar showOn="button" label="Calendar" /><br/>
		
		<p:selectOneMenu>
			<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:tab>
</p:accordionPanel>

6) Analysis

p:calendar appends it´s overlay before the closing body-tag: grafik

p:datePicker appends it´s overlay within the html-tree near to the input: grafik

Maybe we need to modify line 993 of 0-datepicker.js: https://github.com/primefaces/primefaces/blob/0cac0bb10fdeb7f8ccfaab895c56cd436616b796/src/main/resources/META-INF/resources/primefaces/datepicker/0-datepicker.js#L993

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
mertsincancommented, Nov 6, 2019

Hi @christophs78,

Please use appendTo=“@(body)” attribute on DatePicker.

0reactions
christophs78commented, Nov 7, 2019

Hi @mertsincan! Would it make sense to set appendTo per default to “@(body)”?

Read more comments on GitHub >

github_iconTop Results From Across the Web

PrimeFaces 7.0.10 Released
... work with p:columnToggler · DatePicker: overlay-display-issue when used inside accordionPanel (or other containers) or inside a dialog ...
Read more >
Overflow the PrimeNG DialogModule with the CalendarModule
I want to build an Edit popup dialog with an input form in Angular2 using the PrimeNG widgets. I run into trouble with...
Read more >
4453 (UI Datepicker inside UI Dialog Issue) - jQuery UI
I noticed that when using the date picker on a form field inside a tabs container wrapped by a dialog I get a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found