the zero (or negative) height problem of elements inside an initially hidden container

phew, that was a long title. But it took me a while to figure out too. basically, I was working on creating a grid with list elements having the same height. I had done this before on Save22’s older version, and had made a function for it:

  function same_height(container) {
            var items_height = [];

            $(container).each(function() { 
                items_height.push($(this).outerHeight());
            });

            var tallest_content = Math.max.apply( null, items_height );

            $(container).each(function(){
                var item_height = $(this).parent().height();
                $(this).css('height', tallest_content);
            });

        }

same_height('ul#cat-list li');

I’m using Foundation 4 for this project, and I initially put the grid behind a hidden Section tab.

The jQuery code wasn’t working. For hours I couldn’t figure out why, until Mark asked the right question: “is it initially hidden?” and pointed me to a fix someone had made:

https://coderwall.com/p/r855xw

Although I think it means I have to integrate the jQuery with the Section JS of Foundation if I want to keep it hidden, or code my own tabbed fix for this. It just meant: it wasn’t fast enough for me to implement via just the framework + my own code, as I had originally thought. But because I learned of the actual problem later in the day, I already created a different design compromise wherein I made the grid visible already, instead of being hidden.

I’ll see if I have time to make a real fix for this, since there are other pages/components I think I need to finish first.



Comments

Leave a Reply

Your email address will not be published. Required fields are marked *