primefaces / primefaces/primereact
Calendar: Panel not resizing
Open
Nobody has claimed this yet.
Type: Enhancement
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
When having a 100% input, the panel is also set to 100%. However if I want to set the panel width to a specific value (320px for example) by using the panelStyle prop or by using a css class, nothing happens (see below reproduction link).
The panel width is calculated based on the inputWidth, but there's no way of setting it manually:
if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
var inputWidth = utils.DomHandler.getOuterWidth(inputRef.current);
// #5435 must have reasonable width if input is too small
if (inputWidth < 220) {
inputWidth = 220;
}
if (props.view === 'date') {
overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
} else {
overlayRef.current.style.width = inputWidth + 'px';
}
// #5830 Tailwind does not need a min width it breaks the styling
if (!isUnstyled()) {
overlayRef.current.style.minWidth = inputWidth + 'px';
}
}
Reproducer
https://stackblitz.com/edit/stackblitz-starters-zl7tsp?file=src%2FApp.js
PrimeReact version
10.6.2
React version
18.x
Language
ES6
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response
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.
Assessment
This issue has not been assessed yet.