search

tonycorporated / bootstrap-float-label

Pure CSS implementation of Float Label pattern for Bootstrap v3 and v4.
https://codepen.io/tonystar/pen/LRdpYZ
MIT License
118 stars 40 forks source link

Long labels wrapping badly, duplicated label with focused input. #20

Open kacpermaciejevvski opened 6 years ago

kacpermaciejevvski commented 6 years ago

Playing around with long labels causing badly looking, wrapped text. Here's the quick fix for that so:

.has-float-label label { white-space: nowrap; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; display:block; }

Focused input is showing placeholder and label in the same time. Quick fix for this too:

.has-float-label .form-control:focus::placeholder { color: transparent; }