Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set sizer overflow to hidden. #119

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

mvf4z7
Copy link
Contributor

@mvf4z7 mvf4z7 commented Nov 28, 2017

I have been experiencing some odd bugs in different versions of FireFox where the width is being calculate incorrectly when I apply horizontal padding on the underlying input. Although I have seen this issue occur multiple times, it has been very hard to reproduce within my own system, so I am not going to try to reproduce in a generic example.

I have found that setting overflow to hidden fixes the problem, but still allows the sizer width to be determined via the scrollWidth property. I have provided a Codepen below that demonstrates this behavior.

https://codepen.io/anon/pen/jaeWpN

…to be acquired via the scrollWidth property, but it also compensates for a weird bug in FireFox.
@resurtm
Copy link

resurtm commented Feb 15, 2018

I've also had to play a bit with display CSS property. Default display: block; still caused some sizing issues. Setting display to inline fixed that.

@prabirshrestha
Copy link

@JedWatson any update on this? Would like to have this in so we don't need to patch it.

@danielrob
Copy link

This raises the input above the line on Firefox 60.0.2 on OSX El Capitain. I wouldn't support this fix without further explanation.

Sandbox:
https://stackblitz.com/edit/react-cvvxfk?file=index.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants