Checkout UI Extension Overlaying Div Content

[Gregles]

Hi,

I'm creating a Checkout UI extension for a client that makes address recommendations to replace the built in Google Address Search. I'm aware there is the new autocomplete endpoint but the way the address system the client is using work, I can't use this approach (or can but it would make it much more expensive).

The issue I have is that I've created the search box and results panel, but I can't get the results panel to overlay the other elements on the page. Instead it pushes them down like this:

The question I have is is there a way to make that results div overlay other items on the page relative to another item (the search box)?

Or, is there a component I've missed that solves that problem? Ideally it should be positioned next to the search field, so a modal is not appropriate.

This is the wrapping element, I'm just using a BlockLayout element for it.

Ideally I want to recreate what already exists if possible.

Thanks for any pointers.

[3node_vackam · Accepted solution]

Hey @Gregles,

You might want to try something like this:

const blockLayout = root.createComponent(
BlockLayout,
{
rows: ['auto', 1],
},
[
root.createComponent( /* Your text input */ ),
root.createComponent( /* Your auto-search modal */ ),
],
);
root.appendChild(blockLayout);

The first row should adjust it's size to the search bar and the other should be small enough to make the auto-search modal overflow - which should result in what you're expecting. However, Shopify might be preventing this behaviour. If you find out that is the case, I recommend experimenting with the Modal / Popover components.

Hope this helps :]