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

You can add external resources in for example https://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. — thepio, Sep 09 '16 at 09:16
Can you modify your ng-repeat etc in here https://jsfiddle.net/thepio/cerwwxd8/ ? — thepio, Sep 09 '16 at 09:30
https://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? — Kliment, Sep 14 '16 at 08:45
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. — user93, Sep 15 '16 at 10:13
I added numbers and red background, and also cannot replicate mentioned issue. @user93 which columns did you mean? gridster does not have columns — Andriy, Sep 15 '16 at 15:54
sorry, forgot to share fiddle link: https://jsfiddle.net/cerwwxd8/8/ — Andriy, Sep 15 '16 at 16:34
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? — user93, Sep 16 '16 at 03:06
.smalltiles{ min-height: 30%;} .largetile{ min-height: 60%;} — user93, Sep 16 '16 at 03:07

score 2 · Accepted Answer · answered Sep 16 '16 at 07:09

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)'
}

how to fix overlapping of angular-gridster items while shrinking

1 Answers1