Keen-UI
Keen-UI copied to clipboard
Labels jumping during the floating animation on <ui-textbox>
When one of the
Note that the label becomes a little blurry.
This behavior is observed not everywhere, sometimes it displays perfectly. But I couldn't find any regularity.
This shows most of the time if you put a TextBox inside an animated UiModal (scale animation)
if you put a TextBox inside an animated UiModal
Possible, but I didn't put the TextBox inside an animated UiModal. DOM looks like this:
<div class="profile">
<h2> {{userInfo.name}} </h2>
<section class="user-info">
<ui-textbox
floating-label
label="User Name"
name="name"
placeholder="Enter user name"
v-model="userInfo.name"
required=true
></ui-textbox>
<ui-textbox
floating-label
label="Password"
name="password"
placeholder="Password"
v-model="userInfo.password"
type = "password"
required=true
></ui-textbox>
<!-- many another ui-textbox -->
</section>
</div>
For textboxes I use the following workaround:
.ui-textbox__label {
...
border-bottom: 1px solid transparent;
}
.is-active .ui-textbox__label {
...
border-color: $color;
}
.ui-textbox.is-active:not(.is-disabled) .ui-textbox__input, .ui-textbox.is-active:not(.is-disabled) .ui-textbox__textarea {
...
border-bottom-width: 1px;
}
@JosephusPaye If you consider it a good solution I can make a fix and create a PR (for textboxes and select).