wie der Winkel gridster Elemente überlappend zu beheben, während

Question

schrumpf Ich verwende AngularJS 1.5.8 und versuchen Winkel gridster Layout wie diese

und in mobilen Modus Elemente zu erreichen, stapeln untereinander. Meine gridster-Optionen sind

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

folgt und ich habe folgenden Stil zu

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

Das Gitter sieht in Desktop-Bildschirm in Ordnung, wenn es verkleinert oder in vollem Umfang nutzt das Gitter überlappt und Elemente untereinander beginnen, sich so zu überlappen.

Wie gehe ich damit fort? Ist mein Layout falsch, danke im Voraus.

Hinweis: Es wäre besser, wenn ein Beispiel Bootstrap-CSS-Klassen mit

Answer 1

schließlich gegeben ist es gelungen das Problem zu replizieren, indem ng-class="{smalltiles:item.sizeY<2,largetile:item.sizeY>1}" Hinzufügen Artikel gridster finden https://jsfiddle.net/cerwwxd8/9/ und versuchen 2 (SMALL TILE) zu bewegen über 3 (GROßE FLIESE). Diese Geige verwendet min-height CSS-Regel.

hier https://jsfiddle.net/cerwwxd8/10/ alle min-height CSS-Regeln werden mit height CSS-Regel ersetzt, und hier 2 (SMALL TILE) über 3 (GROSS TILE) überlappende produziert nicht bewegt.

BTW: Index in dieser Geige ist mit attr() CSS-Funktion gedruckt, die diesen Wert aus der Eigenschaft tabindex HTML holt innerhalb Inhalt CSS-Regel:

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