patternfly / patternfly/patternfly
Bug - DatePicker and TimePicker popover incorrectly displayed when inside ExpandableSection
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 817
- Forks
- 116
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 14
Description
Describe the problem
This is an issue with
-
Patternfly 5
-
Patternfly 6
-
other
The popover of DatePicker or Timepicker is not fully displayed when used from inside ExpandableSection.
How do you reproduce the problem?
import { ExpandableSection, DatePicker, TimePicker } from '@patternfly/react-core';
export const ExpandableSectionBasic: React.FunctionComponent = () => {
return (
<ExpandableSection toggleText="Test" isExpanded>
<DatePicker/>
<TimePicker/>
</ExpandableSection>
);
};
Expected behavior
A clear and concise description of the expected behavior.
Is this issue blocking you?
Found a workaround by overloading --pf-v6-c-expandable-section__content--TranslateY property from css as follows:
.pf-v6-c-expandable-section {
--pf-v6-c-expandable-section__content--TranslateY: 1 !important;
}
Screenshots
Following screenshot shows DatePicker's popover truncated:
Following screenshot shows TimePicker's popover menu truncated:
What is your environment?
- OS: Windows 11
- Browser:
- Edge Version146.0.3856.109 (Official build) (64-bit)
- Chrome Version 146.0.7680.178 (Build officiel) (64 bits)
Any other information?
Problem does not occur with Patternfly 5
Jira Issue: PF-3935
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with DatePicker and TimePicker inside an expanded ExpandableSection in PatternFly 6. Inspect the SCSS controlling the --pf-v6-c-expandable-section__content--TranslateY property and compare the behavior with PatternFly 5. Done means both popovers are fully visible without the reported CSS workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100