Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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).
Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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.
Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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.
Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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.
Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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?
Hide/Show Toggle with Hubl not working right in Emails
SOLVE
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.
