#joonasm-afterpay-layout
final rune
<b-row>
<b-col >
<div id="afterpay-clearpay-message"></div>
</b-col>
</b-row>
using bootstrap-vue grid
I have no idea why it places the logo and the (i) icon like that... nothing I do around it has any effect
wooden crescent
Can you try and give me a full summary all in one message with a clear reproduction, hopefully in jsfiddle or similar or on your live page?
final rune
hmm.. no, sorry.. idk how I would do that.. this is in a dev environment in a big application
wooden crescent
You should be able to put a simple/basic reproduction in place showing the issue overall
final rune
it's a fixed block of html & css that it produces that cannot be tweaked with outside css so I have no idea
amount: parseInt(this.artwork.price)*100,
currency: 'USD',
logoType: 'lockup',
lockupTheme: 'black',
modalTheme: 'white',
showLowerLimit: false,
}
this.stripe = await this.$stripe();
this.stripeElements = this.stripe.elements();
const afterpayClearpayMessageElement = this.stripeElements.create('afterpayClearpayMessage',stripeOptions);
afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');```there's seriously nothing more to it.. everything is generated by the elements API
wooden crescent
Sure but https://jsfiddle.net/qh6dg07y/
like that just works
So there has to be something your code or your layout is doing that is the problem
that's why I'm asking if you can reproduce in a way that I can look at it and show you
https://jsfiddle.net/yesw92f1/ similar example where the parent forces a small width
so I think what's happening is that the parent element has a width a little too small which causes that layout shift
final rune
Nope.. i can set the font size to 5px and logo width to 10px and same effect
But I can see if I can arrange access tomorrow somehow. Past midnight.