alexplumb/material-ui-phone-number

flag covers whole screen on firefox

Opened this issue · 7 comments

Freundschaft commented

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

Same here

  • 👍2
davext commented

Temporarily fixed it by adding

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

to my css file

  • 👍2
Freundschaft commented

thanks, this should be fixed in a PR

  • 👍2
david-vendel commented

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

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

.MuiPhoneNumber-flagButton {
    width: min-content;
}
  • 👍8
  • 🎉4
david-vendel commented

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.

  • 👍2
viclafouch commented

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