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

Optimizing CSS for Icon-Only Buttons: Ensuring Perfect 1:1 Aspect Ratio #6942

Open
abhishek-junghare opened this issue Dec 9, 2024 · 1 comment
Open

Optimizing CSS for Icon-Only Buttons: Ensuring Perfect 1:1 Aspect Ratio #6942

abhishek-junghare opened this issue Dec 9, 2024 · 1 comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback

Comments

@abhishek-junghare
Copy link

Describe the bug

Currently, the width of the icon-only button is fixed, resulting in a not-square ratio button shape.

image

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-c5cmxedk?file=src%2FApp.vue

PrimeVue version

4

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 131.0.6778.109

Steps to reproduce the behavior

Please check the stackblitz template shared

Expected behavior

The icon-only button should be in 1 : 1 width to height ratio.
@abhishek-junghare abhishek-junghare added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 9, 2024
@abhishek-junghare abhishek-junghare changed the title Button Icon Only - Better CSS Method for Square Optimizing CSS for Icon-Only Buttons: Ensuring Perfect 1:1 Aspect Ratio Dec 9, 2024
@tugcekucukoglu tugcekucukoglu added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 10, 2024
@github-actions GitHub Actions
Copy link

Due to PrimeVue team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tugcekucukoglu @abhishek-junghare