Using flexbox items inside a flexible column

Regular Contributor

Hi there,

 

Hubspot's 'flexible column' is really handy if you want to let your users choose to add and remove items as they please. But alas, when I'm using flexbox, Hubspot's smorgasbord of wrapper divs and spans interferes with the flexbox styling. What I'd like to do is this:

<div class="flex-container"> <! -- This should be the flexible column -- >
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <! -- Users can add and remove as many items as they like -- >
</div>

 

Here's the wrapper span that Hubspot adds:

<div class="span12 widget-span widget-type-widget_container" style="" data-widget-type="widget_container" data-x="0" data-w="12">

    <span id="hs_cos_wrapper_module_14876318666271711" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container">

        <! -- Content goes here -->

    </span>

</div>

Is there a way to remove the wrapper from the flexible column so I can use it as a container for flexbox elements?

Reply
0 Upvotes
3 Replies 3
Occasional Contributor

I am also quite interested to know if this is possible. As of now I manged to get the flex box working by targeting the classes of the span

 

.flex-wrapper .hs_cos_wrapper {
display: flex !important;
}

.flex-wrapper .hs_cos_wrapper_type_custom_widget {
flex: 1;
border: 1px solid green;
padding: 10px;
}

simple example here on the two green border boxes. 

http://tahsinwonders.hs-sites.com/2017-lp-cert?hs_preview=xHKVuJJe-4706980078

Regular Contributor

Interesting! That works, I suppose. It just means that you need to write separate CSS rules for flexible columns than for regular columns. I have a grid system set up that targets "span1", "span2" etc. For this to work, I'd need a paralell structure that targets the wrapper spans.

It's unfortunate how Hubspot seem to constantly put people in the situation of having to choose between the desired implementation and clean CSS. Smiley Sad

Reply
0 Upvotes
Esteemed Advisor

@andreasmb I would have to disagree with you on that statement, but understand I use to have the same mind set about Hubspot myself. 

 

Hubspot allows for easy use by developers ranging from beginner to expert. Beginners (maybe a marketing person or business owner needing to build their own site) is able to use the template builder pretty easily to create a simple site. The sites generally look pretty decent due to hubspots default code but you are right in that with that default code you lose alot of control, control that a beginner wouldn't need. 

 

For real/advanced developers Hubspot offers Hubl. You can do anything you can do in the template builder with Hubl, but you also have options like exporting to the templates context and setting no_wrapper to True which removes those pesky span tags. 

 

I imagine based on your posts that you are an experienced developer. You should either build your pages as coded pages and write your hubl or build them in the template builder but use the HubL module for things like you are describing to create more advanced functionality on your website. 

 

doing this and using export_to_template_context  and no_wrapper=True, depending on the situation, will literally free you markup of default code that is absolutely necessary for novices to build in hubspot. Basically just use HubL and typical programming logic to take a higher level approach to your issues. Default Hubspot does not cater to Higher level developers, they cater to marketers and sales people who happen to need a website. You can do anything you want in Hubspot though if you can just understand how. 

- Jonathan Sumner