search

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 438 forks source link

Width of floating label in UiTextbox not correct #447

Closed sagg closed 5 years ago

sagg commented 5 years ago

Hi,

the floating label is producing scrollbars cause it does not fit into it's own container. I made a small example using a modal, there it's pretty easy to see. https://codesandbox.io/s/vue-template-uimd7

Thanks. :)

JosephusPaye commented 5 years ago

Hi @sagg,

Yeah, it's easy to see. This happens because we're scaling the label up to sit in the textbox when there's no input. This makes the width grow past 100%.

We can fix this by updating .ui-textbox__label to hide any overflow:

.ui-textbox__label {
    overflow: hidden;
}
JosephusPaye commented 5 years ago

Fixed in 3e998ff.