Why does my checkout UI extension always have a top margin?

Why does my checkout UI extension always have a top margin?

Sanket_Patel
Shopify Partner
20 0 2

Hi,

I am building checkout-ui extension, There is always top margin spacing. Why is that ? and why only in my component, 

See below screenshot,  "This Order Contains A Gift" is also a 3rd party component, but.. that does not have spacing. 

I placed View > Text component, I tried directly Text component as well. 

 

 

Screenshot 2023-04-14 180009.png

 

The yellow part is going to be my text label, I like to hide/show based on conditional things on Address lines. 
Right now, it is hidden, but.. still section's margin spacing is unnecessary adding spacing. 

 

Can someone suggest solution ? 

Freelancer | Software Developer | Shopify Customization Guru | Shopify Public App Creator | sanket972528@gmail.com | https://sannket.com
Replies 4 (4)

Fabian_fg
Shopify Partner
6 0 0

Same question here.

chris-john-hopk
Shopify Partner
1 0 0

Have this same issue. Did you ever resolve? 

Fabian_fg
Shopify Partner
6 0 0

Not yet, would love Shopify to look into this

Sanket_Patel
Shopify Partner
20 0 2

Yes, it was my limited knowledge in React which was causing this extra space. You should check your visibility related code if you are doing same as me. (conditional hide/show)

Freelancer | Software Developer | Shopify Customization Guru | Shopify Public App Creator | sanket972528@gmail.com | https://sannket.com