#guilherme_paymentelement-appearance
thorny trailBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1288200037892886642
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
faint cradle
Here I'm using fontSize = 16px
hasty crow
newsala_paymentelement-appearance
guilherme_paymentelement-appearance
Hey @faint cradle! Can I ask you for exact end-to-end code to reproduce the issue? The appearance API can be really complex if we don't all look at the exact same code and results.
The easiest could be to make a jsfiddle or similar to reproduce what you are trying to change
faint cradle
I'm working on the WooPayments plugin, and the exact end-to-end code will require a WooCommerce Store because the appearance object is dynamically generated using the Store's CSS. What if I dump the appearance object, would that help?
hasty crow
You should be able to make a really simple standalone reproduction example of the exact needs you have. Having a live example we can look at, completely separate from your complex environment will help us help you.
faint cradle
I can try to reproduce that in jsfiddle. Do you have a sample I can use?
faint cradle
Is it? I tried using CardElement options but it didn't work.
hasty crow
hmmm so you're using a weird PaymentElement in card-only mode with a force height/width?
faint cradle
Yes, it is a card-only PaymentElement
I don 't know about the height/width
I confirmed we're rendering a <PaymentElement />
hasty crow
what theme are you using? Sorry I'm struggling to reproduce with so few details
Like I'm passing const options = { clientSecret: 'xxxx', appearance: { theme: 'stripe', rules: { '.Input': { fontSize: '16px', lineHeight: '16px', }, } } }; but not seeing your behaviour
but you have something "weird" where the Expiration Date is on the same line as the card number which means you must be forcing some kind of width/height I assume
faint cradle
"theme":"stripe"
I'm still trying to get the Payment Element to render using jsfiddle.
Are you using floating labels? It only happens with floating labels.
faint cradle
It's 19px instead of the expected 16px
This is from your example.
So the total height of the input is 65px instead of the expected 62px.
And for me, in your example the Expiration Date is also on the same line as the card number. Is it different for you?
hasty crow
why wouldn't it be on the same line? 😅
I feel like you have some expectation I don't yet understand. Those are labels, they are in the middle until you click inside and then it floats above
faint cradle
but you have something "weird" where the Expiration Date is on the same line as ...
I thought you said this was weird.
Anyway, I don't see a problem with the label. I don't understand why the line height of the input is 19px instead of 16px.
hasty crow
Yeah sorry I was asking how you got to your exact UI but since you were still working on it I tweaked my own example myself until I got to the same layout you did
And then I made a repro so we could speak about the same exact UI/flow
faint cradle
Got it
In jsfiddle you set lineHeight and fontSize to 16px, but the rendered input line height is 19px high.
hasty crow
@faint cradle okay pairing with someone on my team and we do see what you are referring to. We have a "1.15 weight" change on single line input element. That's where it's coming from internally and it's not something you can really control
Okay my colleague made this example https://jsfiddle.net/rt5kgcha/ where they set fontLineHeight: '1'
they say it should fix what you were looking for