#guilherme_paymentelement-appearance
raw sleetBOT
👋 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/1288511738790019122
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- guilherme_paymentelement-appearance, 19 hours ago, 41 messages
shadow sonnet
See the input line-height is 19px, when it should be 16px.
lilac charm
Good question, looking in to this. If you change to other sizes, is it always a 3 px difference? If you set it to lower, is it always 16 px? I think there are some things we enforce a minimum size on. Looking in to this, but knowing that could help direct where I look
shadow sonnet
There's no minimum size, and I think it is always higher by a percentage. Setting it to 5px renders as 6px. Setting it to 50px renders as 59px.
lilac charm
Gotcha, I have a payment element this on my side with this same config and am looking in to what is happening here. I am admittedly not that familiar with inspecting styling this way, whereare you seeing the 20 px in the developer tools? Is it the 32 - 12 numbers from the green padding rectangle?
shadow sonnet
It is the blue one. In this case it is 19 for some reason. But it was 20px before.
You can see this by inspecting the card number input
lilac charm
Still looking in to this, will reach out to colleagues who are more familiar to see what we can find.
raw sleetBOT
errant garden
Hello! I'm taking over and catching up...
I believe we helped you out with this issue yesterday, correct? Did setting fontLineHeight not work?
We shared this with you yesterday: https://jsfiddle.net/rt5kgcha/
errant garden
@shadow sonnet You here?
shadow sonnet
I’m having lunch, can we talk in a few minutes?
The solution you sent me yesterday does not work, the line height is 19px when it should be 16px.
errant garden
Did you see the fiddle? The line height there appears to be correct, yes? Can you provide your own fiddle showing it being incorrect?
shadow sonnet
This is from your fiddle. The code says 16px, but it is being rendered as 19px.
Is it different for you?
errant garden
The height of the HTML element is 19, but the line-height is being computed as 16px as desired:
It sounds like you're talking about something that's not actually line height?
shadow sonnet
Yes, I'm talking about that 19px. I'm sorry if that's not the line-height. Is there any way to set that to 16px without changing the font size?
I tried setting height to 16px but it says it is not supported by the .Input element.
errant garden
Can you show me a mockup of what you want the element to look like so I can help you get to that point?
Ideally with exact pixel measurements shown?
shadow sonnet
I just noticed it also says fontLineHeight is not supported by the .Input element.
errant garden
Yep, let's ignore that for now. Let's focus on what you really want, which is a specific height somewhere. A mockup would be the best way forward.
shadow sonnet
I updated the fiddle I just sent. Check the test input I created before the element.
This is what I'm trying to achieve
errant garden
Why, though? That doesn't show me what you want it to look like. Can you tell me more about your goals/motivation?
shadow sonnet
Sure. As I said yesterday, I work on the WooPayments plugin. Any merchant who installs it will have the form rendered on their checkout page, but each store look differently. Because of that, we have code to extract the computed style of their checkout page and adapt it into the settings object expected by the Appearance API (this is the file in case you want to see it). This works great with the "labels above". No matter how customized their store is, the element is rendered exactly like the rest of the page seamlessly.
Now we're implementing the floating labels style, but I can't get the input to render correctly because of that issue with the component height. I'll send two pictures. The first one is the input from the checkout page we're trying to replicate dynamically, the second one is what we got.
If only I knew how to predict how taller the height is going to be when compared to the font-size, I could subtract that from the padding and make it look right.
errant garden
So, to clarify, you don't actually care about the height of the input field in there (the one that's currently 19 high) you only care about the overall height of the entire element (which is currently 65)?
shadow sonnet
For example, with the padding-top, I discovered that I can get the actual value I want (24px), subtract the Label--floating line-height, and then subtract 4px and use it. So, when the label line-height is 12px, I can set the padding-top to 12px for it to be rendered as 24px.
shadow sonnet
So, to clarify, you don't actually care about the height of the input field in t...
As long as I can still keep the correct alignment, for example, subtracting 2px from each vertical padding, that would be fine.
errant garden
Okay, so your target height is 62 for the entire field, correct?
shadow sonnet
In this case, yes. But as I explained before, it could be different. Each store owner customize their store different. Some might have inputs with a total height of 40px, some might be 65px.
We extract every css value used to customize their input and translate it to the appearance api. It doesn't need to have the exact same values as long as it looks the same.
We either need to set the input height (blue rectangle) to a set value, or we need to understand how Stripe calculates it so we can account for that and use properties that will match the visual on the other fields on the page.
This is how I set the padding top for example:
appearance.rules[ '.Input' ].paddingTop = `calc(${ expectedInputPaddingTop } - ${ appearance.rules[ '.Label--floating' ].lineHeight } - 4px)`;
If you don't want to change the font size I recommend you adjust the top and bottom padding like so to get the desired height: https://jsfiddle.net/t1Lzx4bn/
shadow sonnet
Yes, we can do that. But how much do we need to adjust for any expected value?
errant garden
I think one thing that's throwing you off is the line height, which by default is set to 1.15. When that's combined with other values it's giving you fractional results that are being rounded up or down in different ways. Setting lineHeight to 1 will solve for that.
shadow sonnet
Setting lineHeight to 1 does not change it. It is still rendered as 20px when I set the font-size to 16px.
Sure, I could subtract 4px from the padding to account for that, but this 4px is not a fixed amount. When the font-size is 11px it renderes as 14px, so a difference of 3px. When the font-size is 20px, the difference is 5px.
errant garden
Zooming out a bit, I don't think what you're trying to do at a high level is practical. The Payment Element is designed to have a variable height depending on many factors, and attempting to control the specific height of certain things to the pixel with the constraint of not adjusting the font size isn't realistic.
raw sleetBOT
shadow sonnet
That's a shame. It would be really cool if we could replicate the store's look so we could have a seamless integration. Since that's not possible, I'll discuss with my team whether we accept this margin of error that might look strange on some sites or whether we should reconsider using floating labels. Thanks for all your help!
swift rover