search

bennypowers / stripe-elements

Custom Element Wrapper for Stripe.js v3 Elements
https://stripe-elements.netlify.app/
79 stars 20 forks source link

Setting line height for base style is not working #40

Open lpellegr opened 4 years ago

lpellegr commented 4 years ago

First of all, thanks for this nice wrapper! Unfortunately, it seems that setting a line-height for the base style with --stripe-elements-base-line-height is not working properly. Once set, the stripe-elements element is always growing to 150px in height.

Here is a small example to reproduce the issue:

https://codesandbox.io/s/stripe-elements-web-component-lit-element-42rfv

bennypowers commented 4 years ago

Hello! Thank you for opening this issue, and thank you for providing a reproduction.

I can see that indeed the line-height is set properly:

Screen Shot 2020-02-22 at 22 22 04

Something else is causing the container to take on 150px height. I wasn't yet able to track down exactly what is causing that.

The Stripe.js docs advise against using line-height anyways, perhaps consider setting padding

stripe-elements::part(stripe) {
  padding: 16px 18px;
}