search

PolymerElements / paper-input

A Material Design text field
https://www.webcomponents.org/element/PolymerElements/paper-input
130 stars 159 forks source link

Fix overflow:hidden bug I introduced in the previous PR #598

Closed notwaldorf closed 6 years ago

notwaldorf commented 6 years ago

Fixes #597, fixes #593 again.

Previous PR on this topic #594 did a bad (I did the bad). It added overflow:hidden which actually cut off the input and made it look like this: screen shot 2017-12-05 at 4 54 38 pm

This PR correctly fixes the original RTL problem (which was that the label-come-down-from-floating-to-not-floating animation overflowed in the container) by correctly setting the overflow direction (which is backwards, thanks @bicknellr for spotting that)

Not floated (ltr and rtl): screen shot 2017-12-05 at 5 35 37 pm

Floated: screen shot 2017-12-05 at 5 35 43 pm

And as a bonus does the thing that @azakus said we should do which is just use :dir errwhere because it works in 1.0 as well.

It takes a village, fam.

xelra commented 6 years ago

This also fixes #583. OMG! It's an issue-closing spree!

notwaldorf commented 6 years ago

Yeah tests are the usual red but green locally; yay focus, yay blur.

AliMD commented 6 years ago

@notwaldorf I teaching CSS more than 10 years but cant understand what relation between This PR file changed and #597 😕 😄 Thank you, by the way, Could you please little explain what happened exactly ?! (if you like)

notwaldorf commented 6 years ago

@AliMD In #594 I added an overflow: hidden to paper-input-container which clipped the content (like you saw, and worse, if you had an error message it would get clipped halfway). I originally did that because when in RTL, when the label needed to float back down (because you deleted all the content), it overflowed on the left hand side. That however, can be fixed by positioning the label correctly (the overflow direction gets flipped in RTL), so you don't need the overflow:hidden. Anyway, not a very scientific answer.

AliMD commented 6 years ago

@notwaldorf Thank you but #597 not related to overflow, I change overflow in demo and problem not solved!