{% module %} template is being out of the <span />

[mrepede]

Hi

I am currently in the process of exporting a landing page template to HubL and have been utilizing the single line text module.

In this module, the code is enclosed within a <span> tag as follows:

<p><span>{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}"
%}</span></p>

However, I am encountering a difficulty. Post-export, in the HubSpot Landing Page, the module input seems to be falling outside of the span, as demonstrated below:

<p><span> </span></p>
<div id="hs_cos_wrapper_3ff53984-8111-2fdf-b8a4-ac7de550b901" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-text hs-baymax-editor" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" data-hs-overrideable="true" data-test="selenium-widget-editor-ready"><div id="hs_cos_wrapper_3ff53984-8111-2fdf-b8a4-ac7de550b901_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">As an SEO specialist, you understand the challenges of making healthcare more accessible and profitable.</div></div>

Given that the module input is not enclosed within the span, the designated styles are not applying correctly, resulting in broken formatting.

I would appreciate any insights or advice on how to correctly place the module input within the <span> tag to prevent this issue.

Thanks!

[alyssamwilie · Accepted solution]

This is happening because paragraph tags cannot have block elements inside them (aka the <div>s). If you add no_wrapper=True to the module tag it should render without the divs.

{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}",

no_wrapper=True
%}

Will note however that I believe the wrapper is how HubSpot makes the module clickable within the page editor so removing that means someone editing a page with this template would have to locate the module in the editor sidebar to edit it. So if you want it to be 'click to open' you'll have to instead not use a paragraph tag around the module.

[mrepede]

Thanks for your suggestion. I tried as you suggested.

{% module "${key}",
path="@hubspot/text",
label="${label}",
value="${text}",
no_wrapper=True
%}

<p><span class="tofu-element" data-tofu-id="3ff53984-8111-2fdf-b8a4-ac7de550b901">{% module "3ff53984-8111-2fdf-b8a4-ac7de550b901",
path="@hubspot/text",
label="The industry has struggled to make healt",
value="The industry has struggled to make healthcare more accessible, but [MyCompany] is here to help. Our services can unlock profitability in the telehealth industry.",
no_wrapper=True
%}</span></p>

But it's still falling outside of the span.

<p><span class="tofu-element" data-tofu-id="c39e413b-54ea-fa13-8504-79bf3469ecc9"></span></p>

<div id="hs_cos_wrapper_c39e413b-54ea-fa13-8504-79bf3469ecc9_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">Unlock the ROI in telehealth with our expert SEO services for companies struggling.</div>

Does it mean that we can't edit the copy in span, p tags?

Thanks!

[alyssamwilie]

Hm, yea, looks like it only removes one of the divs. So you'll have to just not put the module in a paragraph tag. Once removeing the <p> the <span> should still work. It's only the <p> tag that explicility doesn't allow block elements in it.

[mrepede]

We're mostly trying to update copies on landing pages that are inside p or span tags. Could this be a limitation of HubSpot, do you think?

[Jaycee_Lewis]

Hi, @mrepede 👋 Thanks for your question. Let's invite some of our community members to the conversation — hey @alyssamwilie @louischausse @carolgiacon @Anton, do you have any feedback for @mrepede? Have you been successful with doing this without creating a custom coded module? 

Thank you for taking a look! — Jaycee