Topic list previews theme component grid issue

Support Other
1

On one forum (on stable) the TLP theme component output looks like this with topic list tiles and topic list thumbnails

image
image1118×680 191 KB

No other theme components have been enabled.

On other sites (on stable) it obviously works correctly.

Upon debug this code

function resizeAllGridItems () {
  const allItems = document.getElementsByClassName ('tiles-grid-item');
  let grid = false;

  grid = document.getElementsByTagName('tbody')[0];

  if (!grid) {
    return;
  }
  const rowHeight = parseInt (
    window.getComputedStyle (grid).getPropertyValue ('grid-auto-rows')
  );
  const rowGap = parseInt (
    window.getComputedStyle (grid).getPropertyValue ('grid-row-gap')
  );

sets rowHeight and rowGap to NaN which causes a NaN here as well

<div data-topic-id="49" id="ember93" class="tiles-grid-item topic-list-item ... has-excerpt pinned tiles-grid-item ember-view" style="grid-row-end: span NaN;">

On a correctly working site, grid-auto-rows and grid-row-gap are both 4px
On this site

"grid-auto-rows": "auto"
"grid-row-gap": "normal"

which obviously causes rowHeight and rowGap to be NaN.

Does anyone have any idea how those are determined?

1 Like
3

That’s very strange. Can you share the URL?

1 Like
5

It’s in the post above this one :wink: . TLP is only enabled on that specific category.

This site is currently running a patched version of TLP so it looks fairly good now.

  const rowHeight = 4; /*parseInt (
    window.getComputedStyle (grid).getPropertyValue ('grid-auto-rows')
  );*/
  const rowGap = 4; /*parseInt (
    window.getComputedStyle (grid).getPropertyValue ('grid-row-gap')
  );*/

There are no Javascript errors.

The standard layout is not very clean and is causing lot of other issues so the layout is still shifting a bit, but it’s so much better compared to the non-patched version which I screenshotted above.

And if you sign up you can choose the layout called ‘debug’ which ONLY has this theme component. You can see it is good now it has the patched version.

1 Like