DatePicker: overlay-display-issue when used inside accordionPanel (or other containers) or inside a dialog
See original GitHub issue1) 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
3) Actual behavior
p:datePicker fails
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:
p:datePicker appends it´s overlay within the html-tree near to the input:
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:
- Created 4 years ago
- Comments:9 (9 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @christophs78,
Please use appendTo=“@(body)” attribute on DatePicker.
Hi @mertsincan! Would it make sense to set appendTo per default to “@(body)”?