jak naprawić nakładających się elementów skośnych gridster podczas kurczenia

Question

Używam angularjs 1.5.8 i próbuje osiągnąć prostokątny układ gridster jak ten

i elementów trybie komórkowym stosu poniżej siebie. Moi gridster-Opcje są następujące

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'] 
     } 
    }; 

i użyłem następujące styl zbyt

.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; 
} 

Siatka wygląda dobrze na ekranie komputera, gdy jest on zmieniany w dół lub w pełnym ekranie siatka pokrywa i elementy poniżej siebie zaczynają się nakładać w ten sposób.

Jak postępować z tym. Czy moje układy są złe z góry dzięki.

Uwaga: Byłoby lepiej, gdyby przykład za pomocą bootstrap klasy css podano

Answer 1

wreszcie udało się replikować problem dodając ng-class="{smalltiles:item.sizeY<2,largetile:item.sizeY>1}" do gridster element, patrz https://jsfiddle.net/cerwwxd8/9/ i spróbować przenieść 2 (mała płytka) powyżej 3 (DUŻY PŁYTKA). To skrzypce używa reguły CSS min-height.

tutaj https://jsfiddle.net/cerwwxd8/10/ wszystkie min-height CSS zastąpić height reguły CSS, a tutaj porusza 2 (mała płytka) powyżej 3 (duża płytka) nie powoduje nakładania się.

BTW: indeks w tym ryba jest drukowany z attr() funkcji CSS, które pobiera tę wartość z tabindex własności HTML ciągu zawartości reguły CSS:

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