how to fix overlapping of angular-gridster items while shrinking

Question

I am using angularjs 1.5.8 and trying to achieve angular gridster layout like this

and in mobile mode elements stack below one another. My gridster-options are as follows

 this.standardItems = [
        { sizeX: 2, sizeY: 1, row: 0, col: 0 },  
        { sizeX: 2, sizeY: 1, row: 1, col: 0 },
        { sizeX: 4, sizeY: 2, row: 0, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 0 },
        { sizeX: 2, sizeY: 1, row: 2, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 4 },
    ];

    $scope.gridsterOpts2 = {
        margins: [20, 20],
        outerMargin: false,
        swapping: false,
        pushing: false,
        rowHeight: 'match',
        mobileBreakPoint: 600,
        margins: [10, 10],
        floating: false,
        isMobile: true,
        draggable: {
            enabled: false
        },
        resizable: {
            enabled: false,
            handles: ['n', 'e', 's', 'w', 'se', 'sw']
        }
    };

and I have used the following style too

.smalltiles{
  min-height: 30%;
}

.largetile{
  min-height: 60%;
}

.gridster .gridster-item {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #004756;
  background: #ffffff;
  padding-top: 5px;
  padding-bottom: 0px;
  background: blue;
  font-size: 50px;
  color:white;
}
.gridster{
  min-height:100%;
}
.gridster-item{
  margin-bottom: 10px;
}

The grid looks fine in desktop screen when it is resized down or in full screen the grid overlaps and elements below each other begin to overlap like this.

How do I proceed with this. Is my layouting wrong thanks in advance.

Note: It would be better if an example using bootstrap css classes is given

Haem

Would it be possible for you to make a demo of this? – Gigantic

thats the whole code for angular gridster – Haem

You can add external resources in for example jsfiddle.net . The most important would be to present your code as of now (controller etc) and give a demo people can try out and try to figure an answer for you. – Gigantic

Can you modify your ng-repeat etc in here jsfiddle.net/thepio/cerwwxd8 ? – Gigantic

thanks @Gigantic ill modify there – Haem

jsfiddle.net/cerwwxd8/4 i modified a bit and now its working. I could not replicate your problem. Maybe some other class from your application is messing the grid? also which browser do you use? – Brimmer

i was setting min-height to each column using css so that it dose not get too small even mobile mode. it is the one that is causing the problem. – Haem

I added numbers and red background, and also cannot replicate mentioned issue. @Haem which columns did you mean? gridster does not have columns – Casabonne

sorry, forgot to share fiddle link: jsfiddle.net/cerwwxd8/8 – Casabonne

you have used min-height for smalltile as 30% and largetile as 60% but those css classes seems to have no effect and it is not applied anywhere? – Haem

.smalltiles{ min-height: 30%;} .largetile{ min-height: 60%;} – Haem

Answer 1

finally succeeded to replicate your issue by adding ng-class="{smalltiles:item.sizeY<2,largetile:item.sizeY>1}" to gridster item, see https://jsfiddle.net/cerwwxd8/9/, and try to move 2 (SMALL TILE) above 3 (LARGE TILE). This fiddle uses min-height CSS rule.

here https://jsfiddle.net/cerwwxd8/10/ all min-height CSS rules are replaced with height CSS rule, and here moving 2 (SMALL TILE) above 3 (LARGE TILE) does not produce overlapping.

BTW: index in this fiddle is printed with attr() CSS function which fetches this value from the tabindex HTML property within content CSS rule:

.smalltiles{
  text-align: center;
  height: 30%;
}
.smalltiles:after {
  font-size: 0.5em;
  content: attr(tabindex) ' (SMALL TILE)';
}

.largetile{
  text-align: center;
  height: 60%;
}
.largetile:after {
  font-size: 0.7em;
  content: attr(tabindex) ' (LARGE TILE)'
} 

Casabonne