Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Calendar (Tailwind): Width is calculated wrong #6093

Closed
vaelu opened this issue Mar 6, 2024 · 4 comments · Fixed by #7124
Closed

Calendar (Tailwind): Width is calculated wrong #6093

vaelu opened this issue Mar 6, 2024 · 4 comments · Fixed by #7124
Labels
Component: Tailwind Tailwind specific issue
Milestone
10.8.3

Comments

@vaelu
Copy link
Contributor

vaelu commented Mar 6, 2024 •
edited
Loading

Describe the bug

There were similar issues already (#5830, #5920), but it seems to me that it's still not fixed or there is a new bug.

We are using the Calendar component with unstyled mode and the Tailwind passthroughs provided by PrimeReact. However, the panel seems to calculate the width too big. When we remove the min-w-class, then the panel is too small.

With min-w-full (like in the official docs):
Screenshot_1

Without min-w-full (ignore other stylings):
Screenshot_2

Reproducer

https://stackblitz.com/edit/ewd4me

PrimeReact version

10.5.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response
@vaelu vaelu added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 6, 2024
@melloware melloware added Component: Tailwind Tailwind specific issue and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 6, 2024
@melloware
Copy link
Member

cc @zawasp

@vaelu
Copy link
Contributor Author

vaelu commented Apr 16, 2024

Is there any update on this? Would be cool if this would get fixed soon.

@nrueckmann
Copy link

still broken in 10.6.3

@melloware
Copy link
Member

PR is welcome from anyone who works with Tailwind and understands what needs to be done...

gcko added a commit to gcko/primereact that referenced this issue Sep 6, 2024
@gcko
feat: primefaces#6093 Fix Tailwind styles in unstyled mode
f104433 
- Fix typos in tailwind style
- Remove `groupContainer` and `group` styles. They are not needed
- Fix panel styling
- In Calendar.js: remove minWidth when in unstyled mode. Calling `DomHandler.alignOverlay` force sets `minWidth`, so we need to back it out. See [Line 348](https://github.com/primefaces/primereact/blob/master/components/lib/utils/DomHandler.js#L348)
@gcko gcko mentioned this issue Sep 6, 2024
Merged
@melloware melloware added this to the 10.8.3 milestone Sep 7, 2024
melloware pushed a commit that referenced this issue Sep 7, 2024
@gcko
feat: #6093 Fix Tailwind styles in unstyled mode (#7124)
692524b 
- Fix typos in tailwind style
- Remove `groupContainer` and `group` styles. They are not needed
- Fix panel styling
- In Calendar.js: remove minWidth when in unstyled mode. Calling `DomHandler.alignOverlay` force sets `minWidth`, so we need to back it out. See [Line 348](https://github.com/primefaces/primereact/blob/master/components/lib/utils/DomHandler.js#L348)
@leoo1992 leoo1992 mentioned this issue Oct 31, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Tailwind Tailwind specific issue
Projects
None yet
Milestone
10.8.3
Development

Successfully merging a pull request may close this issue.

feat: #6093 Fix Tailwind styles in unstyled mode gcko/primereact
3 participants
@melloware @nrueckmann @vaelu