search

alexplumb / material-ui-phone-number

Fork of react-phone-input-2 for the Material-UI library
MIT License
121 stars 180 forks source link

flag covers whole screen on firefox #110

Open Freundschaft opened 2 years ago

Freundschaft commented 2 years ago

works fine on chrome but on firefox the flag covers the entire screen and is way too big, anyone else see this issue on firefox?

davext commented 2 years ago

Same here

davext commented 2 years ago

Temporarily fixed it by adding 

.MuiPhoneNumber-flagButton{
    max-width: 10px !important;
}

to my css file

Freundschaft commented 2 years ago

thanks, this should be fixed in a PR

justdvl commented 2 years ago

Is this library maintained? Can we expect fix of this and other issue in some near future? :) (just asking to know, my release is in few months, because otherwise I will have to migrate)

mckelveygreg commented 2 years ago

I found that setting the width to min-content helped avoid hard coding any values and !important s

.MuiPhoneNumber-flagButton {
    width: min-content;
}
justdvl commented 2 years ago

Hello all, I forked this library, fix Firefox and Safari bug (and plan to fix other issues and rewrite to fn component) and published it to npm as material-ui-phone-number-2

https://github.com/justdvl/material-ui-phone-number-2 https://www.npmjs.com/package/material-ui-phone-number-2

I recommend everyone who needs to use this library, but working version, to make a simple switch. I will also actively maintain this version 2 library.

viclafouch commented 2 years ago

Or another library : https://www.npmjs.com/package/mui-tel-input (with phone validation available)