JosephusPaye / Keen-UI

A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
https://josephuspaye.github.io/Keen-UI/
MIT License
4.1k stars 437 forks source link

Fix UiSwitch thumb overlapping an open modal #514

Closed jeff-hykin closed 2 years ago

jeff-hykin commented 3 years ago

Current Behavior (switch bleeds into model, even with modal z-index: 99999)

Screen Shot 2020-10-12 at 1 43 55 PM Screen Shot 2020-10-12 at 1 44 14 PM




Behavior After .ui-switch__thumb { z-index: unset }

Screen Shot 2020-10-12 at 1 45 34 PM




This PR Behavior (change element order instead of using z-index)

Screen Shot 2020-10-12 at 1 50 15 PM Screen Shot 2020-10-12 at 1 50 33 PM
JosephusPaye commented 3 years ago

Hi @jeff-hykin,

Thanks for the PR! Were you able to check with other browsers to confirm that it works?

Happy to merge this if there's no regression.

jeff-hykin commented 3 years ago

Yes, should work on any browser that merely implements the HTML 5 specification, tested on Firefox and Chrome.

The original z-index was only needed because the elements were out of order (probably on accident).

jeff-hykin commented 3 years ago

Note there is a similar issue with ui-buttons having a z-index, but I can't confirm removing it doesn't cause side effects so it's not in this PR. I should probably open an issue for it

JosephusPaye commented 2 years ago

Thanks!

JosephusPaye commented 2 years ago

Released in v1.3.2