icon grid second row issues

I have the same issue, except that I have a gap between rows.
Apparently it’s depending on the viewport width (one will find out while resizing the browser window) and the height of the boxes (resulting from the content).

Best, Jürgen

• This reply was modified 4 years ago by JVo.

Hi Vic,
yes, that is exactly what I’ve stated above!
If you make the browser window narrower, the blocks become narrower and thus the text lines shorter, resulting in more lines => bigger height.

Upon resize event, apparently you recalculate the min-height attribute of each .article-icon-entry.
BUT: Sometimes your calculation is WRONG, since the li ancestor can become taller than the .article-icon-entry! I have ANFI, why this happens.

If I look for the tallest li element (in your example 351,19px) the min-height of the .article-icon-entry elements should also become 351,19px. But obviously it is 295.188px (since the outerHeight of tallest .article-icon-entry element is 295.188px).

If I set min-height of the elements manually to the correct value by executing jQuery(‘.article-icon-entry’).css(‘min-height’, “351.19px”), all is good for the moment: the gap is closed (until I resize the browser window).

Digging in your code in iconlist.js, I find these lines:

				setMinHeight: function (els) {

					if (els.length < 2) return;

					var elsHeights = new Array();
					els.css('min-height', '0').each(function (i) {
						var current = $(this);
						var currentHeight = current.outerHeight(true);
						elsHeights.push(currentHeight);
					});

					var largest = Math.max.apply(null, elsHeights);
					els.css('min-height', largest);

Just calculate currentHeight from the outerHeight of the li parent (instead of the article element itself) like so:

						var current = $(this).closest('li');

That did the trick for me (and will do probably for everybody else running into that problem)!
You can thank me later.

Best, Jürgen