Hide/Show Toggle with Hubl not working right in Emails

SOLVE
New Contributor

I'm trying to use some custom hubl to toggle on/off states for certain sections in an HTML email. Works great in non-Outlook devices. Curious if you have any suggestions of how to get this working in Outlook.

Basically, it's a row quantity dropdown. If they choose 2, then the others are hidden. The purpose of this feature was so that we could create a template for all options, and then they could choose which options they wanted to actually use while creating the new email w/ that template.

 

It works in non-Outlook readers, as well as 1 or 2 version of Outlook (can't recall off hand).

Here's my code:

 

{% if widget.grp_updates_number == "grp2" %}
        .refer-3, .refer-4, .refer-5, .refer-6 { display: none !important; width:0 !important; max-height: 0 !important; line-height: 0; overflow:hidden !important; font-size: 0 !important; float:left; mso-hide: all; }
    {% elif widget.grp_updates_number == "grp3" %}
        .refer-3 { display: block; }
        .refer-4, .refer-5, .refer-6 { display: none !important; width:0 !important; max-height: 0 !important; line-height: 0; overflow:hidden !important; font-size: 0 !important; float:left; mso-hide: all; }
    {% elif widget.grp_updates_number == "grp4" %}
        .refer-3, .refer-4 { display: block; }
        .refer-5, .refer-6 { display: none !important; width:0 !important; max-height: 0 !important; line-height: 0; overflow:hidden !important; font-size: 0 !important; float:left; mso-hide: all; }
    {% elif widget.grp_updates_number == "grp5" %}
        .refer-3, .refer-4, .refer-5 { display: block; }
        .refer-6 { display: none !important; width:0 !important; max-height: 0 !important; line-height: 0; overflow:hidden !important; font-size: 0 !important; float:left; mso-hide: all; }
    {% elif widget.grp_updates_number == "grp6" %}
        .refer-3, .refer-4, .refer-5, .refer-6 { display: block; }
    {% endif %}

What am I missing? Is this even possible?

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Regular Advisor

If the functionality works, it's definately going to be Outlook's CSS support. Since Outlook doesn't support the display property, the display:none declaration is not taking effect and the content shows.

Here is a good reference for CSS support across email clients, https://www.campaignmonitor.com/css/

 

Reply
0 Upvotes
Highlighted
Regular Contributor

Like Rickwhittington said, Outlook is a pain in the neck... styling using CSS is unreliable there, so the best (and often only) way to get things to show / hide correctly is to omit them when the email is processed.

 

Instead of using your conditional logic to modify the style information for the HTML, you can put the logic directly in the email template to "turn off" entire sections of content instead.

 

It looks like you're just trying to turn ON/OFF a number of sections based on the widget.value from the edit interface.

 

First I'll just clean up the widget reference to be an int variable for easier use: (uses filters) - 

{% set group = widget.grp_updates_number|int %}

If you actually need to pass the grp2 / 3 / 4 as a string just omit the |int filter.

 

Then in your email template file you'd wrap your sections in the logic you need. Ex:

{% if group == 2 %} {# of if group == "grp2" for string variable #}

{% elif group == 3 %}
{# put group 3's html code here #}
{% elif group == 4 %}
{# put group 4's html code here #}
{% endif %}

This assumes it's a single section where you want your dynamic content. If things are all over the place, i.e. refer-3 is somewhere in the hero section and refer-5 is in the footer, you'd just wrap each section with the conditional logic that would show or hide it. I recommend the |int approach for this, since we'll be using number logic.

 

To set up your conditionals for all elements without having to create a bunch of rules (like the style rules you have), I suggest setting conditionals for the html based on the minimum group number where the HTML should show.

 

It looks like the group number corresponds to the introduction of a new "refer" section, while still keeping the other numbered sections lower than the group number.

 

Here's what that logic would look like to wrap each section (examples for group 3 and 4)

{% if group >= 3 %}
{# refer-3 html code here #}
{% endif %}
{% if group >= 4 %}
{# refer-4 html code here #}
{% endif %}

You would just wrap each section of HTML code in logic like this corresponding to the group minimum group number where this section should appear.

 

Hope that helps!

 

Best,

Mike

Reply
0 Upvotes
4 Replies 4
Regular Advisor
Outlook has crappy CSS support. Display, float and overflow are not supported.i Is it just the rendering issue in outlook or is the functionality not working either?
New Contributor

Functionality works. But can't get it to hide anything in Outlook.

Reply
0 Upvotes
Regular Advisor

If the functionality works, it's definately going to be Outlook's CSS support. Since Outlook doesn't support the display property, the display:none declaration is not taking effect and the content shows.

Here is a good reference for CSS support across email clients, https://www.campaignmonitor.com/css/

 

Reply
0 Upvotes
Highlighted
Regular Contributor

Like Rickwhittington said, Outlook is a pain in the neck... styling using CSS is unreliable there, so the best (and often only) way to get things to show / hide correctly is to omit them when the email is processed.

 

Instead of using your conditional logic to modify the style information for the HTML, you can put the logic directly in the email template to "turn off" entire sections of content instead.

 

It looks like you're just trying to turn ON/OFF a number of sections based on the widget.value from the edit interface.

 

First I'll just clean up the widget reference to be an int variable for easier use: (uses filters) - 

{% set group = widget.grp_updates_number|int %}

If you actually need to pass the grp2 / 3 / 4 as a string just omit the |int filter.

 

Then in your email template file you'd wrap your sections in the logic you need. Ex:

{% if group == 2 %} {# of if group == "grp2" for string variable #}

{% elif group == 3 %}
{# put group 3's html code here #}
{% elif group == 4 %}
{# put group 4's html code here #}
{% endif %}

This assumes it's a single section where you want your dynamic content. If things are all over the place, i.e. refer-3 is somewhere in the hero section and refer-5 is in the footer, you'd just wrap each section with the conditional logic that would show or hide it. I recommend the |int approach for this, since we'll be using number logic.

 

To set up your conditionals for all elements without having to create a bunch of rules (like the style rules you have), I suggest setting conditionals for the html based on the minimum group number where the HTML should show.

 

It looks like the group number corresponds to the introduction of a new "refer" section, while still keeping the other numbered sections lower than the group number.

 

Here's what that logic would look like to wrap each section (examples for group 3 and 4)

{% if group >= 3 %}
{# refer-3 html code here #}
{% endif %}
{% if group >= 4 %}
{# refer-4 html code here #}
{% endif %}

You would just wrap each section of HTML code in logic like this corresponding to the group minimum group number where this section should appear.

 

Hope that helps!

 

Best,

Mike

Reply
0 Upvotes