Share Your Work

mrepede
Mitglied

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

lösung

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!

0 Upvotes
1 Akzeptierte Lösung
alyssamwilie
Lösung
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

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

lösung

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

Lösung in ursprünglichem Beitrag anzeigen

5 Antworten
alyssamwilie
Lösung
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

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

lösung

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
mrepede
Mitglied

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

lösung

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!

0 Upvotes
alyssamwilie
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

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

lösung

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
mrepede
Mitglied

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

lösung

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?

0 Upvotes
Jaycee_Lewis
Community-Manager/-in
Community-Manager/-in

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

lösung

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes