UI issue on iPhone - Githubissues

40818419 / react-code-input

React component for entering and validating PIN code.

MIT License

314 stars 129 forks source link

UI issue on iPhone #180

Open gsofter opened 2 years ago

gsofter commented 2 years ago

When we input the numbers on iPhone(Safari), the numbers are not being displayed fully but it is being cut down.
Screenshot

krisko4 commented 10 months ago

@gsofter please make sure to set padding-right: 0 in styles of your input. It seems that the browser sets some padding for an input on iOS. Suprisingly, it happens only on physical mobile device and cannot be reproduced using safari devtools on macOS. Example code using styled-components:

const StyledInput = styled(ReactCodeInput)`
  > input {
      padding-right: 0;
    }
`;

...or

<ReactCodeInput inputStyle={{paddingRight: 0}} />