Skip to content

Checkbox + RadioButton - fix long labels are stretching outside #2446

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

Merged
merged 2 commits into from
Feb 6, 2023

Conversation

Inbal-Tish
Copy link
Collaborator

Description

Checkbox + RadioButton - fix long labels are stretching outside their container

Changelog

Checkbox + RadioButton - fix long labels are stretching outside their container

Copy link
Contributor

@lidord-wix lidord-wix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like it didn't solve the problem, see the attached screenshots.
Also on the RadioButton, the spacing between the label and the icon is now bigger (Text on left example, with the iconOnRight prop)
Screen Shot 2023-02-05 at 15 47 34
Screen Shot 2023-02-05 at 15 46 10

@Inbal-Tish
Copy link
Collaborator Author

Inbal-Tish commented Feb 6, 2023

@lidord-wix This wasn't the fix... The issue was that the text is going outside of the Checkbox parent container, not its own container as this is a line break issue and you cannot control it 100% as the text is dynamic. What the fix did is made the text break before it gets to the parent edge. See screenshots.

Before the fix:
Without the fix

After the fix:
With the fix

@Inbal-Tish
Copy link
Collaborator Author

Inbal-Tish commented Feb 6, 2023

Regarding the RadioButton and the spacing between the label and the icon when passing contentOnLeft - this will also be dynamic and depends on the text and line break (as long as the text is aligned left):

Long word that goes to the second line:

Simulator Screen Shot - iPhone 13 - 2023-02-06 at 09 23 35

Short word that stays at the first line:

Simulator Screen Shot - iPhone 13 - 2023-02-06 at 09 23 42

@Inbal-Tish
Copy link
Collaborator Author

Anyways I'll use flex shrink so it will look better...

@lidord-wix lidord-wix merged commit ae49223 into master Feb 6, 2023
@Inbal-Tish Inbal-Tish deleted the fix/labels_stretch branch February 16, 2023 12:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants