search

appuniversum / ember-appuniversum

Ember addon wrapping the appuniversum components.
https://appuniversum.github.io/ember-appuniversum
MIT License
14 stars 10 forks source link

fix(toggle-switch): make width calculations more consistent #377

Closed abeforgit closed 1 year ago

abeforgit commented 1 year ago

Issue that triggered this: when the toggle component is a child of a flexbox where there's another element taking up all the leftover width, it doesn't reserve enough space for the toggle to look proper, which did not improve with increasing the width variable. untoggled(too small): image toggled (too far to the right): image

I don't really know if this is the right solution, but it makes sense to me. It also eliminates the absolute offset in the translation, which caused it to render weird with large width settings:

before the change, with width set to 5rem: image

after the change, with width set to 5rem: image

Windvis commented 1 year ago

I'm not sure, but can't we simply tell that the toggle itself is not allowed to shrink (by setting flex-shrink to 0)?

@brenner-company Any insights? 😄

brenner-company commented 1 year ago

I'm not sure, but can't we simply tell that the toggle itself is not allowed to shrink (by setting flex-shrink to 0)?

@brenner-company Any insights? 😄

I agree with @Windvis on this issue. Disabling flex-shrink is the most elegant solution here 👍

Windvis commented 1 year ago

Closing since #380 fixes the issue in a different way. Let us know if the issue still persists on v2.4.2.