Cards collapse all in one piled up deck

[DbTheo84]

I have used this tool and it works awesome(great job) but I am facing a problem when minimizing the browser window width below 480px using my mouse or opening the application on a smartphone. Every card is collapsing into each other for all rows and columns and forming like a piled up deck of cards.

I am using the div as a tag and I created my card using bootstrap grid base system (e.g: col-xs-12 col-sm-12 col-md-12 col-lg-12)

===========================

let Catalogue = measureItems(SpringGrid,{ measureImages: true , background:true });
Catalogue = makeResponsive(Catalogue, {
              maxWidth: 1900,
              minPadding: 80,
              defaultColumns: 4
            });

const CardCatalogue = ({dataItems}) => {

  const setupGrid = {
        layout:layouts.pinterest,//simple, pinterest
        widthColumn:400,
        itemsHeight:530,
        stiffness:250,
        damping:15,
        perspectiveAmt:600,
        guttersWidth:10,
        guttersHeight:10,
        columns:3,
        duration:800
      };

  return(
    <Catalogue
      component='div' 
      columnWidth={setupGrid.widthColumn} 
      gutterWidth={setupGrid.guttersWidth} 
      gutterHeight={setupGrid.guttersHeight} 
      layout={setupGrid.layout}
      springConfig={{ stiffness: setupGrid.stiffness, damping: setupGrid.damping }}
      perspective={setupGrid.perspectiveAmt}
      duration={setupGrid.duration}>
    {
      dataItems.map((item) => (
        <div className='card2 tariffCardWidth400px card-1 row noPadMar borderThicker' key={item.id}> <ItemCard  key={item.id} item={item} /></div>
      ))
    }
    </Catalogue>
  );
};

CardCatalogue.propTypes = {
  dataItems: PropTypes.array.isRequired
};

export default CardCatalogue;

=========================================

From what I am seeing in the html source code in chrome the transform style is going from (for 2 items) item1: position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 1; transform: translateX(0px) translateY(0px) perspective(600px) scale(1); item2: position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 1; transform: translateX(0px) translateY(553px) perspective(600px) scale(1);

into for both of the items position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 1; transform: translateX(-410px) translateY(0px) perspective(600px) scale(1);

Its weird because -410 is the width for each item 400+10(gutter).

Am I doing something wrong?

=================================================

css that i use on the div inside the map is

.tariffCardWidth400px{
  width: 400px;
}

.card2 {
  background: #ffffff;
  border-radius: 1px;
  display: inline-block;
  position: relative;
  overflow-y: auto;
  padding: 0;
  margin: 0;
border-bottom-width: 40px!important;
  border-bottom-color: #49C5D1!important;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.noPadMar{
  padding-left: 0px!important;
  padding-right: 0px!important;
  padding-top: 0px!important;
  padding-bottom: 0px!important;

  margin-left: 0px!important;
  margin-right: 0px!important;
  margin-top: 0px!important;
  margin-bottom: 0px!important;
}

.borderThicker{
  border-color: #e7eaec;
  border-width: thin;
  border-style: solid;
}

[dantrain]

Just had a try replicating this with the demo page and it does indeed happen when the viewport width goes below the combined columnWidth and minPadding. For the demo this is 250px and for you 480px.

This is definitely a bug, thanks for reporting it!

[DbTheo84]

I'm glad that I was not doing something wrong on my side with this. Was looking at it for days to try to find out the issue. Im sad because its the only bad thing i find with the tool which is not that bad because most of my users work on desktops but it will be awesome on the go to have.

Thanks for the fast reply.I appreciate it.

Do you recommenced anything to fix it for now or will an update come soon?

again awesome job!!!!

[dantrain]

Should be fixed in v0.3.7.

[DbTheo84]

yeap thanks alot.it is fixed! Thanks for the fast and great fix!