Disappearing content

I remember experiencing this before with mapbox. When I click any of the first 2 buttons on the footer (montacargas, plataformas), it makes visibles the PDFs icons and changes the text inside each symbol.

Each row is contained inside a group
iconsRow-1
iconsRow-2
iconsRow-3...

Inside each row, the PDFs icons are separated by individual IDs
rowA-1, rowA-2, rowA-3...
rowB-1, rowB-2, rowB-3...
rowC-1, rowC-2, rowC-3...

Each one of this PDFs icon / symbol have the pdficons class.

Well, the thing is that the text inside each symbol is not immediately visible, ONLY until you resize your browser is when the texts appears.

When I experienced this with map box, I resolved it by animating the size of the container where the map box is loaded, but here I can not resolve it that easily and still I believe there should be a more… elegant solution.

Download the hype file:
PDFicons.zip (116.0 KB)

This is how it should look when loaded, but the text always appears blank, this happens in both Safari and Chrome.

And even after resizing the browser, if you pick other option in the menu, still some icons refuse to display the text container.

Try adding this line at the end of your functions that show the specific document icons (window.pdfs_seguridad_plataformas and window.pdfs_seguridad_montacargas):

hypeDocument.relayoutIfNecessary();

Looks like it is a sizing issue where Hype’s flexible layout system isn’t aware of the changes you made via jquery.

1 Like

As usual, the solution is way simpler that I originally expected. Thanks a lot, that fixes it.

1 Like

I kept experiencing this same problem more often that I was confortable with, and there were situations where relayoutIfNecessary(); was unable to fix it.

So I found that the root of the problem seem related to the “flexible layout” configuration.

I saw the “position with CSS left/top” option, and I threw a wild guess and “hey, what happen IF I do set everything inside this container with the left and top pins”, and well, it worked.

While the relayoutIfNecessary(); still is doing wonders for me, right now, I am able to not use it by setting the flexible layout in the way I mentioned, since I am using “zoom contents”, this is not a big deal.

If I enable “Position with CSS left/top” the whole situation can be avoided, since it fixes the whole thing, but there are some situations where this gives me some low performance animations.

2 Likes

Interesting - I hadn’t actually looked at the exact root cause but that would point to it being more of a rendering issue than a sizing issue. I’m glad that checkbox is there to fix it :slight_smile:.