#newb1
wintry kiln
hybrid gyro
Hi there, what element are you using?
hybrid gyro
OK, what options are you looking for?
untold topaz
whatever fixes what's in the image
enlaring font size causes letters to overlap/cutoff
also they cutoff at the bottom if you go too big on the font
some kind of hidden div with no overflow visibility i guess?
hybrid gyro
OK. so your question is basically how to enlarge the CardElement input field to fit the larger fontSize, am I right?
untold topaz
yes both width and height
the grid columns seem to be locked into position, only options i see are to increase padding/margins inside them, which would further overlap/cutoff the text inside
presumably the card number column right margin is what's causing this but not sure
hybrid gyro
Can you share with me the code? I'm wondering if there's a parent element that constraint the size of card element.
untold topaz
var style = {
base: {
color: '#32325d',
fontLineHeight: '100%',
fontSize: '1.3em',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#aab7c4'
}
},
the #card-element itself i can enlarge the height all i want e.g. height:2000px; but it doesn't increase the height of the input field
hybrid gyro
I'm more interested in how to layout the card element.
Or is there a public URL that I can visit to see your problem?
untold topaz
no, not sure what code you're wanting i guess
hybrid gyro
btw fontLineHeight is not a valid object property for card element style (https://stripe.com/docs/js/appendix/style)
untold topaz
got that from here https://stripe.com/docs/elements/appearance-api
was just randomly trying things
hybrid gyro
That's appearance API, it's not applicable to card element.
untold topaz
right, but couldn't figure out how to fix my issue because it's not in the js style docs
so just tried random things
hybrid gyro
I can't reproduce the problem that you are facing. In my test integration, changing the fontSize would automatically enlarge the size of card element.
untold topaz
what about the grid columns and rows, how does changing the font size affect those?
hybrid gyro
If you can upload your project somewhere public, it'll be easier for me to reproduce the problem and troubleshoot
untold topaz
for instance the card number part, there's excess space to the right of it, even with card number fully entered, it still has all the extra space
and again making the font bigger doesn't fill it, it just starts cutting off the numbers on the right like an invisible div with no overflow available
are you saying that you enlarge the font and it automatically enlarges your input field?
and doesn't quash the mm/yy/cvc/zip together
hybrid gyro
That extra space is to display the card number as customer enters it.
untold topaz
again even with the number fully entered there's still more space
hybrid gyro
You can adjust the width the card element
untold topaz
great, how
oh you mean the entire element
what about the fields inside
card number | mm/yy | cvc | zip
hybrid gyro
You can adjust the width of e entire element.
untold topaz
right now card number field is about 75% of the element, the mm/yy | cvc | zip part is inside the remaining 25%
and enlarging font just squashes the placeholder text together
like in the image i attached
hybrid gyro
If you require more customization, you can consider creating seperate cardNumber, cardExpiry and cardCvc elements, so that you can control the size of these individual elements indepedently.
untold topaz
so you're saying the width of the grid column of input fields in the card element can't be altered?
hybrid gyro
I don't see such option for card element.