Remove wrapper from module when adding to template via GUI

Develop, Build & Integrate CMS Development
1

Hi,
I have a few modules where the CSS behaves differently depending on the selector of the next direct sibling so I need to get rid of Hubspot’s outer wrapper.

I need this:

<section class="foo"></section>
<section class="foo"></section>
<section class="bar"></section>

And not:

<div class="hs_cos_wrapper"><section class="foo"></section></div>
<div class="hs_cos_wrapper"><section class="foo"></section></div>
<div class="hs_cos_wrapper"><section class="bar"></section></div>

I’m familiar with the no_wrapper parameter when manually adding the module to an HTML HubL template and that works just fine in that scenario :+1::

{% module "module_123456" path="/path/section_foo", label="Section Foo", no_wrapper=True %}

However, I need to be able to add these modules to a blank template page via the Create Page GUI and I’m unsure how I can add the no_wrapper parameter :-1:.

For the sake of clarity, these modules are being added to a flexible_column and not a dnd_area so we’re not talking about the outer wrappers around dnd_modules which I understand are necessary. I’m just talking about the hs_cos_wrapper.
Thanks in advance for any help.

2

Hi @actionpark,

I’ve run into problems myself using the drag and drop template builder (GUI) myself so decided to go and create html templates for more controle.

I don’t think you can remove the wrapper from within the GUI with Hubl so if you want that you have to get creative. You could use some javascript / jquery to do so and unwrap. but it will give some delay.

Some code example will be:

$('span.hs_cos_wrapper > .hs_cos_wrapper > *:first-child').each(function(){
 $(this).unwrap();
});

But befor applying, what do you want accomplish because maybe there is another way around it.

3

Yea, that’s what I was afraid of. Oh well. Thanks for the feedback.
Vanilla JS solution if anyone in the future stumbles on this post.

let unwrap = document.querySelectorAll(".hs_cos_wrapper .unwrap");
 unwrap.forEach((el) => {
 let parent = el.parentNode;
 parent.outerHTML = parent.innerHTML;
 });