dnd_module offset

[markgonz]

Hello,

I have set a modules width=8 and offset=2, but the offset is being ingnored.  My template code is below: 

  {% dnd_module offset=2, width=8, path='@hubspot/rich_text' %}
            {% module_attribute 'html' %}
              <h1>Feature one</h1>
              <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
            {% end_module_attribute %}
          {% end_dnd_module %}

Here is the output:

<div class="span8 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="2" data-w="8">
<div id="hs_cos_wrapper_dnd_area-module-2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_dnd_area-module-2_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h1>Feature one</h1>
<p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p></span></div>

</div><!--end widget-span -->

Has anyone experienced this before?

[Kevin-C]

Hey @markgonz 

@webdew 's usage is correct.

Expanding on their answer:

The purpose of the offset parameter is to allow us to keep the desktop order and mobile stacking order independent. In order to have your layout render as expected you must place another "spacer" column in the offset. Something like this:

{# This column will render second on desktop and first on mobile #}
{% dnd_module offset=2, width=8, path='@hubspot/rich_text' %}
  {% module_attribute 'html' %}
    <h1>Column 2</h1>
  {% end_module_attribute %}
{% end_dnd_module %}

{# This column will render first on desktop and second on mobile #}
{% dnd_module offset=0, width=2, path='@hubspot/rich_text' %}
  {% module_attribute 'html' %}
    <h1>Column 1</h1>
  {% end_module_attribute %}
{% end_dnd_module %}

It's worth noting that the "spacer" column can be empty!

[webdew]

Hi @markgonz ,

Use DND and offet something like this:

{% dnd_row %}

{% dnd_module offset=0, width=6 %}
{% end_dnd_module %}

{% dnd_module offset=6, width=6 %}
{% end_dnd_module %}

{% end_dnd_row %}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.