Collectionlist grid shifting

Design help Animations & Interactions
1

I’m experiencing collection list items shifting as hide/show interaction occurs. It seems like it’s moving other items.

Below are screenshots of how the interaction shifts:

Original Layout

20%20PM
20%20PM2778×1596 245 KB

Grid Shifts

26%20PM
26%20PM2776×1602 403 KB

https://preview.webflow.com/preview/censiahome?preview=dc320b75e865d66c8ce097eb4e5dd07f

Is anyone having this issue?

Here is my public share link: LINK
(how to access public share link)

2

This is happening because items in HTML are set to display: static by default. This means that when their dimensions change, they will push all other elements around them to create their own space, sort of how position: relative works.

Your fix;

  1. Set the Collection Item with the class Collection Item 6 to a max height of 315px only on desktop. Set to none on mobile
  2. Use this piece of code to make sure that the content shows up on top of the other cards when they expand. Put this in the footer code section in page settings;
<script>
    $('.collection-item-6').each(function(){
         $(this).click(function(){
            $(this).css('z-index','1');
            $(this).siblings().css('z-index','0');
         )};
    });
</script>

I have not tested this since this page is not published as demoed here. Let me know if this works

3

Thank you, Alex!

Setting max height helped to resolve shifting issue! But now I’m having an issue with text boxes.
I believe the script isn’t working for some reason.

45%20AM
45%20AM3326×1674 323 KB

1 Like
4

Hi @censiaR,

This is a great question. It took me a bit of research (I am terrible with javascript), but I was able to get it working. :smile:

​To complete the interaction, please take a look at the following tutorial video: Screen Recording 2018-03-05...

​The custom code mentioned in the video is as follows:
<script> $(document).ready(function(){ $(".div-block-58").each(function() { $(this).click(function() { if($(this).hasClass( "overlay" )){ $(this).removeClass( "overlay" ); }else{ $(this).addClass( "overlay" ); } }); }); }); </script>

Don’t forget: we must remove the combo class before publishing our site. :wink:
​
Hopefully this was helpful :nerd_face:

5

Thank you ! Resolved now :slight_smile: