Streaming live at 10am (PST)

Last Dynamic Item in First Row jumps to Second Row in Safari


#1

The last dynamic item in the first row seems to jump to the second row in Safari only (not Chrome) for MacOS.

Check it out (compare on both Chrome and Safari):
http://ecstaticliving.webflow.io/calendar
http://ecstaticliving.webflow.io/workshops

Here’s the read-only link: https://preview.webflow.com/preview/ecstaticliving?preview=0928fa8a5815857facb1ece8bb0882c21

(Click on “Pages”, then “Workshops” or “Calendar” to see the relevant page.)

Thanks,
Martin


#2

Hi @ConsciousApps

Can you please provide your read-only link?

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link


#4

@PixelGeek, any updates yet?

Reposting this under “Bugs”—not sure how this topic ended up in the category “Design Help”. Seems clearly like a bug to me.


#5

Hi @ConsciousApps, this is a known behavior at the moment. The dynamic list items do not calculate for the height of the dynamic list items, and when there are different items with different height, this kind of offset/one item dropping to the next row can occur.

I would give your dynamic list item a height so that all items are the same height and see if that helps.

Another option to is to limit your list items to 3, so that there is never more than 3 items shown in the row, and create multiple dynamic lists (first list 1-3 items, second list 4-6 etc)

I would check that, I will be standing by ready to help further.


#6

Hi @cyberdave, thanks for this.

Giving the dynamic list item a uniform height doesn’t fix this bug. For example, each calendar item in http://ecstaticliving.webflow.io/calendar has the same height, yet it still creates a new row.

Creating several dynamic collections and limit them to 3 items each is not a workable solution for us, since the content amount varies over time (sometimes 20 events, sometimes 16, sometimes 24, etc.). Is there an ETA on this bug fix?


#7

Hi @ConsciousApps, thanks, when I looked at the page you mentioned, it is showing the rows three across without one dropping to the next row. Is this still an issue?


#8

Yes, @cyberdave, because this error only shows up in Safari—you probably used Chrome or Firefox (this bug appears to be unique to Safari).


#9

Looks like I found a workaround @cyberdave:

I had wrapped the entire list in a Flex Layout class with Direction: Row and Wrap Children enabled.

The reason I did that is because if I either leave out the height or use min-height for the dynamic items themselves (since the items themselves can vary in height, depending on screen real estate) without wrapping the entire dynamic list in a Flex Layout, I get the following result:

The only way to do a workaround on this (without triggering either the above, or the Safari error) is by assigning a fixed height to each dynamic item, which I now have done. The downside is that this creates a lot of empty space inside each dynamic item, since the height will have to be set sufficiently high so that items don’t get cut-off—yet it’s the best solution there presently seems to be.

A fix is still needed—the amount of empty space inside some dynamic items on some pages is too great. On this site these heights are primarily necessary to compensate for iPad landscape mode: the Designer environment only allows us to adjust margins for iPad portrait mode, and so users navigating the website on an iPad in landscape mode are treated as desktop browsers, even thought the screen real estate is much smaller, which squishes the items, hence necessitating a much larger height for each individual dynamic item. This then, in turn, affects how each item looks in the desktop.

https://preview.webflow.com/preview/ecstaticliving?preview=0928fa8a5815857facb1ece8bb0882c211
For example: http://ecstaticliving.webflow.io/workshops


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.