pulley871_payment-element-field-arrangement

[deft oar]

👋 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/1333489350570278986

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[hasty wharf]

Hi 👋

The Payment Element dynamically renders based on the available space. What have you tried?

[azure heath]

Well we have this thing in multiple places on our system and even in spaces where it has large areas, it still does the same thing

Here is an example from our Users portal

[hasty wharf]

What do you want it to look like?

[azure heath]

I would like it to look like the Docs show.
With the card element taking up the whole first row

[hasty wharf]

That depends on the amount of horizontal space allotted. I can do that in my test integration simply by widening or shrinking the browser window

[azure heath]

Just for testing purposes here is the code i just tried and got the same result
<div className={'h-[40rem]'}>
<Elements stripe={stripe} options={options}>
<PaymentElement options={paymentOptions} />
</Elements>
</div>

[hasty wharf]

I'm not sure what to tell you. I just did this by clicking and dragging my browser widow

Full width

Narrow

[azure heath]

So i should shrink the width some, cause when i arrange the window, it does do that.. I will try that approach and see if that helps 🤪

❤️ Thanks