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

Radio minWidth should be computed on window resize events #2399

Open
GianlucaGuarini opened this issue Jan 3, 2023 · 2 comments
Open

Radio minWidth should be computed on window resize events #2399

GianlucaGuarini opened this issue Jan 3, 2023 · 2 comments
Labels

Comments

@GianlucaGuarini
Copy link

GianlucaGuarini commented Jan 3, 2023

Please only report technical bugs. Clarify design issues in the slack channel #ux-ui-support.

A radio input of type button <axa-radio button> computes the min-width of it's content only once breaking its responsive behavior.

Expected Behavior

The width of the .a-radio__content.js-radio__content should be responsive and not fixed via min-width inline styling.

Current Behavior

The content of the radio button breaks if the window gets resized.

Steps to Reproduce

  1. Open this storybook link
  2. Resize you browser window (make it smaller than your initial viewport)
  3. See the horizontal scroll appearing

Context (Environment)

Possible Solution

Let the noAutoWidth attribute prevent this issue. At the moment it's bypassed if the radio is of type button.
Eventually recompute the minWidth on window resize.

@GianlucaGuarini
Copy link
Author

I have played a bit with the code of the radio buttons and I think that this issue can be solved removing the noAutoWidth and minWidth javascript options.
Using the css display:grid; combined with gap properties I have been able to solve all the display issues I have identified.

@MKaHead
Copy link
Contributor

MKaHead commented Jan 19, 2023

Thank you @GianlucaGuarini
I would also prefer something like this display:grid; combined with gap. @markus-walther

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants