S5 Tab Show Issue - modules set up with <div> tags not showing up

lacali21

I've been fighting with this for 2 days and I can't figure out how to make this work. Help please!!

I'm using the S5 tabs module to set up a pricing table. I've placed it in the top_row3_1 position. If the pricing table is set up in a table format the data shows up on the page. But it it's formated with <div> tags, the tables are cut off (I've attached a screenshot to show what I mean). I'd like to use the <div> tags because it looks sharp, but I'm just about ready to tear out my hair already so I may just need to set it up in a table and make it look nice. 🙂 Does anyone know what I'm doing wrong? I've left the programing with the table set up to show what the difference looks like between the 2.

Also it's putting a bunch of bottom padding onto the bottom of the module that I'm not sure where it's coming from.

Thanks so much!!

saguaros

Hi lacali21

Could you share screenshot of that table/div settings in module so I can check?

For the padding bottom, you can override by this:

div#s5_pricing_bottom {
    padding-bottom: unset !important;
}

lacali21

Thank you for the reply. I attached a screenshot of the difference between the look of each setup.

This is the code I was using with <div> tags:

<div class="s5_pricetable_homepage_alignment_outer">
<div class="s5_pricetable_homepage_alignment">
<div class="s5_pricetable_4">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Start-up</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">9<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $5,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</div>
</div>
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Growth</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">15<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $20,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</div>
</div>
<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Shake-out</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">26<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $50,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</div>
</div>
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Established</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">49<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><b>Monthly expenses up to $100,000</b></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
</div>

This is the code I used with the <table> code:

<table>
<tbody>
<tr>
<td>
<div class="s5_title">Start-up</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">9<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $5,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</td>
<td>
<div class="s5_title">Growth</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">15<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $20,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</td>
<td>
<div class="s5_title">Shake-out</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">26<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><strong>Monthly expenses up to $50,000</strong></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</td>
<td>
<div class="s5_title">Established</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">49<span class="month">per day<br /></span></span></div>
<div class="s5_horizontalrule"> </div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Sign Up</a></div>
<div class="s5_options">
<div class="s5_option"><span class="eapps-pricing-table-column-features-item-text"><b>Monthly expenses up to $100,000</b></span></div>
<div class="s5_option">Annual Tax Planning meeting</div>
<div class="s5_option">Unlimited software technical support</div>
<div class="s5_option">Monthly reconciliation of All bank accounts, Credit card and loan accounts</div>
<div class="s5_option">Basic Audit Support - Canada Revenue Agency/Provincial Sales Tax</div>
<div class="s5_option">Xero Accounting software</div>
<div class="s5_option">Hubdoc - Secured Document Storage</div>
<div class="s5_option">Fully Automated payroll provided by partner app</div>
<div class="s5_option">Complimentary knowledge resource</div>
<div class="s5_option">Assistance with Exit Planning to maximize business value</div>
</div>
</td>
</tr>
</tbody>
</table>

saguaros

lacali21 I meant where is the settings in the module that you changed from table to div? or this is from your customization in the module?

lacali21

Hi,

I didn't change the settings in the module. As you can see in module Yearly_pricing (2) (set to module position s5_tab10), all I did was enter the info for the pricing table shown within the opening tabs of:
<table>
<tbody>
<tr>
<td>

and then I closed them off with:
</td>
</tr>
</tbody>
</table>

And this showed the data. What's really wierd is that module Monthly_pricing (which is the module in position s5_tab11) shows up perfectly if the yearly module is set up with the table tags. I'm not sure why.

Please let me know if you need any further info for me.

Thanks for your help!

saguaros

lacali21 Let me check and will get back to you.

lacali21

HI,

Do you have any info on this subject?

Thanks!

saguaros

Hi lacali21

As I can see the tabs are working fine now and the padding is removed. Is that ok now?

lacali21

Good morning!

That is not working - it was in the table tags (module Yearly_pricing (2)) so it was kind of working. But I currently made the <div> tags (module Yearly_pricing) active and it's not working. This is my issue. If you need to set up an online chat or call to figure this out, I would be happy to but I would really like to know if this can be fixed soon.

Thanks for the help!

saguaros

lacali21 I added custom css for the tab, could you check?

lacali21

Sorry for the late reply. Thank you that worked!! 🙂