I am creating a custom module combining two custom modules into one. I have an accordion module and I am trying to nest a module inside of it that can allow users to create an HTML table for displaying textual data (spec sheets, etc). I was able to get the table generator to work in a separate module, but when I pasted it into the nested group, it will show the paramters a user can select on the left, but won’t display the HTML table it generates. I am stuck thinking it’s the {% if item2.enable_data_table %} - can this item2 be used in multiple places? Should it be put in a string like the div class=“content-block… etc”?
Please be gentle as I am relatively new to hubspot CMS and am pretty much self taught with this stuff so I don’t really have a background in python, just HTML/CSS/some javascript.
{% if module.enable_module %}
<div class="accordion_module_wrapper paddingt{{ module.settings.desktop_top_padding }} paddingb{{ module.settings.desktop_bottom_padding }} mobile_paddingt{{ module.settings.mobile_top_padding }} mobile_paddingb{{ module.settings.mobile_bottom_padding }}">
<div class="page-center">
<div class="accordion">
{% for item in module.accordion_group %}
<div class="accordion_group {% if item.expanded %}expanded{% endif %}">
<div class="accordion_header">
<h3>{{ item.title }}</h3>
</div>
<div class="accordion_content">
{% for item2 in item.repeater_content_row %}
<div class="content_block {% if item2.enable_right_column %}enable_two_columns{% else %}enable_single_column{% endif %}">
<div class="left_column_content">
{{ item2.left_column_content }}
{% if item2.enable_data_table %}
<div class="enable_data_table">
<div class="{{name}}">
<section class="section_table">
{% if module.on_off %}
<h1 class="title_h">{{ module.title_setting.heading }}</h1>
{% endif %}
<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="0" style="background-color: #fff;">
<thead style="width: 40%; background: #ffffff; vertical-align: middle; font-weight: 800;">
<tr>
{% set count = 1 %}
{% for item in module.table_repeater %}
<th>{{ item.table_title.heading }}</th>
{% endfor %}
{% set count = count + 1 %}
</tr>
</thead>
</table>
</div>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
{% for item in module.table_repeater %}
<tr class="{% cycle 'odd','even' %}">
{% for item2 in item.column_content_repeater %}
<td>{{ item2.table_column }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</section>
</div>
{% endif %}
</div>
</div>
{% if item2.enable_right_column %}
<div class="right_column-content">
{{ item2.right_column_content }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<!--</div>-->
{% endif %}
{# =============== CSS Styling =============== #}
{% require_css %}
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
{% if module.odd_even %}
.{{name}} tr.even{ font-weight: 500;}
.{{name}} tr.odd{ background-color: none;}
{% endif %}
.{{name}} section.section_table{
padding: {{ module.table_setting.style.padding_top_bottom }}px;
background-color: none;
border-radius: 0em;
-webkit-border-radius: 0em;
-ms-border-radius: 0em;
}
.{{name}} section.section_table h1.title_h{
font-size: font-size: 1.2em;
text-align: left;
color:#333 !important;
box-sizing: border-box;
font-weight: 500;
}
.{{name}} section.section_table table{
width:100%;
table-layout: fixed;
border-collapse: collapse;
overflow: hidden;
margin-bottom: 0px;
}
.{{name}} section.section_table .tbl-header{
background-color: none;
border: none;
font-weight: 500;
font-size: 1.2em;
margin-bottom: 0px;
}
.{{name}} section.section_table .tbl-content{
{% if module.table_setting.style.table_scroll %}
height:500px;
{% endif %}
overflow-x:auto;
margin-top: 0px;
border: none;
border-bottom-left-radius:{{ module.table_setting.style.table_radius }}px;
border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
-webkit-border-bottom-left-radius: {{ module.table_setting.style.table_radius }}px;
-webkit-border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
-ms-border-bottom-left-radius: {{ module.table_setting.style.table_radius }}px;
-ms-border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
}
.{{name}} section.section_table th{
text-align: left;
text-transform: uppercase;
background: none;
color: #333;
border-bottom: 3px solid #9a9a9a;
}
.{{name}} section.section_table tr{
min-height: 32px;
max-height: 2em;
border-right: 1px solid #333;
}
.{{name}} section.section_table td{
text-align: left;
vertical-align:middle;
font-size: 1.2em;
color: #333;
border-bottom: 1px solid #eee;
height: 2em;
min-height: 32px;
}
.{{name}} td:nth-child(2n+1) {
background-color: none;
font-size: 1.2em;
font-weight: 500!important;
width: 40%;
}
.{{name}} td:nth-child(2n+1) p {
font-size: 1.2em;
font-weight: 500!important;
}
/* for custom scrollbar for webkit browser*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
</style>
{% end_require_css %}
