Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Using HUBL for calculated inline CSS
Member | Platinum Partner
Mar 1, 2019 4:33 AM
I have a tabbed module which by default, shows 6 products. However, when another tab is clicked, it shows 4 products. I.e.
- Tab Compare all products shows six items.
- Tab Business only shows four items (because there's only four business products).
Based on this, I'm trying to set the width of the container based on how many items are in its container. I have the PHP for it, but stuggling to convert it into HubL:
$productWidth = 'calc((100% / ' . $numberOfProducts . ') - (5em / ' . $numberOfProducts . ') - 4px)';
HubL:
{% for item in module.products %} <!-- Check how many products exist in total (6) --> {% set numberOfProducts = loop.length %} <!-- Check how many business products exist (4) --> {% if item.this_is_a_homeowner_product %} {% set numberHomeowner == loop.index %} {% endif %} {% set first_calc = (100 / numberOfProducts) %} {% set second_calc = ('75' / numberOfProducts) %} {% set calc = first_calc - second_calc %} {% set productWidth = (first_calc - second_calc) - 4px %} <div class="containerProducts" style="width:{{ productWidth }};"> </div> {% endfor %}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content