How do you layer elements in Checkout UI extensions?

Gregles
Shopify Partner
16 3 0

I'm building a plugin for a client and have it loading results into the page but they sit behind the elements below and I can't find any way to make something a higher level. I considered position: Absolute but that doesn't seem to do anything (always stays as relative).

 

This is what it looks like now:

Screen Shot 2024-05-23 at 11.27.04 am.png

And this is what I would like it to look like:

Screen Shot 2024-05-23 at 11.26.32 am.png

 

If anyone can point me to the right setting on component that would be great.

 

The results sit in a 1px high block layout element if that helps:

const blockLayout = root.createComponent(
    BlockLayout,
    {
      rows: ['auto', 1],
      overflow: 'visible'
    },
    [
      makeField(),
      resultBlock, 
    ],
  );

 

And the results are currently in a View block:

const viewLayout = root.createComponent(
    BlockLayout,
    {
      id: 'viewBlock',
      rows: ['auto', 'fill', 'auto'],
    },
    [
      root.createComponent(View, {}, viewResultHeader),
      scrollView,
      root.createComponent(View, {}, viewResultFooter),
    ],
  );

 

Unless there's a way to inject CSS I haven't found yet?

 

Thanks in advance.

Reply 1 (1)
Gregles
Shopify Partner
16 3 0

Hi, Thanks for the response, but I wanted to know how to actually set things like the Z-index on a checkout ui extension and when I set the position value it does nothing. There doesn't seem to be an option or any way to apply CSS that I can see?