React-stripe-elements: Input for Card Element squished

[chadwtkns]

Trying to implement this into my react app the input from the cardElement is all squished together, is that how it comes out of the box? Do I need to apply extra styling from the get go to get it to appear correctly? Thanks.

[cweiss-stripe]

Hi @chadwtkns, thanks for filing this issue. The input elements always stretch to 100% of the width of their parent container. So you would control this behavior by adjusting the width of the parent element. Let me know if that worked for you.

[cweiss-stripe]

Closing for now, please let us know if things are still unclear.

[chadwtkns]

Yeah sorry for the late response but it was how I was styling the label. Thanks for the advice. It probably wouldn't have been found/thought of for while.

[KudMath]

Is there a way to have the card elements vertically rather than on the same line?

[jez-stripe]

@KudMath There's no way to do this with CardElement. If you want to lay it out a different way, you can use the individual CardNumberElement, CardExpiryElement, CardCVCElement, and PostalCodeElement components, and position them however you want on the page.

If you also want the card brand icon, you'll have to show this yourself (but the CardNumberElement includes the brand information in the change event it gives to your onChange callback).

It's a good idea though! We're considering whether we want to support an option like that in the future.

[RP-3]

@chadwtkns could you share your styling? I'm having the same issue and it's totally not obvious to me how I'm supposed to style the label.

[Rcuz8]

Update: I had the base: { font-size } fixed at 22px. _If you remove this, it will work correctly._

Hi, this is definitely still an issue, under 340px. if you create a CardElement, with no other context, the UI falls apart under 340px width.

I understand 340 px seems small, but consider this example:

• iPhone X Width (via Chrome): 417px
• App has 20px padding on either side (- 40px combined)
• View has 10px padding (- 20px combined)
• All Non-header elements have 10px left/right margins (- 20px combined)
  = 417px - 80x = 337px

Pictures of the issue:

[IliaMaz]

As @cweiss-stripe pointed out, the width is based on the parent element, and if you don't set the width of the parent element it will sit near invisible. Thanks for the solution.

[blainemuri]

Also concur with Rcuz8 above. The elements are not mobile responsive on fairly common screen sizes (iPhone SE), at around 320px. Making the container larger does not fix this.

We should either reopen this issue or create a new one.