Share Your Work

mrepede
Membro

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

resolver

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 Avaliação positiva
1 Solução aceita
alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

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

resolver

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.

Exibir solução no post original

5 Respostas 5
alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

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

resolver

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
Membro

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

resolver

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 Avaliação positiva
alyssamwilie
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

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

resolver

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 Avaliação positiva
mrepede
Membro

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

resolver

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 Avaliação positiva
Jaycee_Lewis
Gerente da Comunidade
Gerente da Comunidade

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

resolver

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 Avaliação positiva