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.

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

Media / Image : In preview mode toolbar is not showing when using tailwind unstyled #4650

Closed
naynyeinchan opened this issue Oct 19, 2023 · 0 comments
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@naynyeinchan
Copy link
Contributor

naynyeinchan commented Oct 19, 2023

Describe the bug

When using tailwind unstyled.
In preview mode, the toolbar does not appear when an image occupies the entire space.

Reproducer

https://codesandbox.io/s/fyzg6r

PrimeVue version

3.37.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

After clicking "preview" and attempting to zoom in, if the image does not occupy the entire screen, you may find that the toolbar is hidden beneath the image.

Expected behavior

In all scenarios, the toolbar should be positioned over the image.

@naynyeinchan naynyeinchan added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 19, 2023
@naynyeinchan naynyeinchan changed the title Media / Image : In preview mode toolbar is not showing Media / Image : In preview mode toolbar is not showing when using tailwind unstyled Oct 19, 2023
naynyeinchan added a commit to naynyeinchan/primevue that referenced this issue Oct 19, 2023
… class

The issue has been addressed by adding the "z-10" Tailwind class to the toolbar class in order to position it over the image.
naynyeinchan added a commit to naynyeinchan/primevue that referenced this issue Oct 19, 2023
The issue of max height not working was resolved by changing the class from "max-h-90" to "max-h-[90%]" with arbitrary percentage values.
@tugcekucukoglu tugcekucukoglu added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Oct 19, 2023
@tugcekucukoglu tugcekucukoglu added this to the 3.41.0 milestone Nov 13, 2023
@tugcekucukoglu tugcekucukoglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Nov 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

3 participants