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

ToggleSwitch styling breaks on Mobile with long label name #884

Closed
MattWindle opened this issue Jul 26, 2023 · 3 comments
Closed

ToggleSwitch styling breaks on Mobile with long label name #884

MattWindle opened this issue Jul 26, 2023 · 3 comments
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers
Milestone
1.0.0

Comments

@MattWindle
Copy link

MattWindle commented Jul 26, 2023 •
edited
Loading

Steps to reproduce

Have a <ToggleSwitch /> with a long label name

<ToggleSwitch
  label="This is a rather large label which breaks styling "
  checked
/>

Current behavior

The ToggleSwitch is collapsing at smaller resolutions when the label text is quite long.

image

Expected behavior

I expected the ToggleSwitch to remain styled on smaller devices, even when the label text is quite long.

Context

In our UI we have the need for some quite long labels but these are breaking the ToggleSwitch Styling as seen above - It looks to be when the text moves onto 2 lines.
@rluders rluders added 🐛 bug Something isn't working confirmed This bug was confirmed labels Jul 26, 2023
@rluders
Copy link
Collaborator

rluders commented Jul 26, 2023

Also, #587

@rluders rluders added this to the 1.0.0 milestone Jul 27, 2023
@ryan-walsh-forte
Copy link

This issue doesn't just happen with very long labels.

Visit the docs at https://www.flowbite-react.com/docs/components/forms#toggle-switch and make the screen narrow:

image

@rluders rluders added the good first issue Good for newcomers label Sep 26, 2023
nikitadubyk pushed a commit to nikitadubyk/flowbite-react that referenced this issue Dec 23, 2023
fix(togglebutton component): fix togglebutton with long label in mobi…
47a47a4 
…le view

Fixed display of component with large label on mobile devices

fix themesberg#884
@nikitadubyk nikitadubyk mentioned this issue Dec 23, 2023
Closed
1 task
@SutuSebastian SutuSebastian mentioned this issue Jun 20, 2024
Merged
3 tasks
@SutuSebastian
Copy link
Collaborator

Fixed in flowbite-react@0.10.0 release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers
Projects
None yet
Milestone
1.0.0
Development

Successfully merging a pull request may close this issue.

fix(togglebutton component): fix togglebutton with long label in mobile nikitadubyk/flowbite-react
4 participants
@rluders @SutuSebastian @MattWindle @ryan-walsh-forte