Bug: Horizon app blocks in header are not full width

[tdavies]

The new Horizon theme has a bug where app blocks added to the Header are not able to expand to the full width, even if the block settings are set to Full width. This was tested on the latest Horizon 1.0.1.

Here are some steps to reproduce this:

Add an app block that expands to full width to the Header:

Set the width to Full under the block settings:

The app block will not expand to the full width:

As a temporary workaround, you can use this Custom CSS on the block to allow it to expand to full width:

.shopify-block {
  width: 100%;
}

[mxstbr]

I don’t think this one is a bug in Horizon.

You’re setting the “Section” around the block to be full-width which is working correctly, but that doesn’t directly affect the app block within the section.

The block within the section also needs to have a setting that sets width: 100%; in order to fill up the section, which is why your custom CSS works.

This is what is happening:

The app block needs to be updated to have a full width setting.

[tdavies]

Hi @mxstbr - Thanks for your reply and for making that helpful graphic.

However, my app block is already set to expand to full width, but it is not able to due to the containing “shopify-block” DIV not expanding to full width.

Here is the generated HTML for my app block within the section:

<div id="shopify-block-AT3BUMHFJRW5KT2o0a__flair_product_badges_labels_banners_7CcfAE" class="shopify-block shopify-app-block" data-block-handle="banners">
<!-- BEGIN app snippet: banners_gen3 -->
<flair-banners product-id="" auto-layout="Default"></flair-banners>
<!-- END app snippet -->
</div>

The flair-banners element is set to expand to the full width, but the “shopify-block shopify-app-block” DIV will not expand as you can see here:

I may be mistaken, but I don’t believe my app block is able to force the containing DIV to be full width. Here is a theme preview link in case you need it.

Could you please give this another look?

Thanks,
Tom

[nunof]

@mxstbr I can confirm that this issue is also occurring across all our apps with multiple merchant reports. We’ve implemented a similar workaround for now:

  div[id*="app_name_app_block"] {
      width: 100%;
    }

The same seems to happen with a custom liquid section in Horizon:

Here, it’s even trickier because the parent div has no selector.

Could you please take a look? Is there something else we are missing?

Thank you,
Nuno

[tdavies]

fyi - I tested this on the latest Horizon 1.0.3 and this is still an issue.