Button to remove/hide grid layout

Ionic Framework ionic-v3
1

ic
ic.PNG1919×369 29.8 KB

home/home.html

<button ion-button id=“isGrid” class=“isGrid”(click)=“changemode(‘isGrid’)”>Grid
<ion-item-sliding *ngFor=“let grid of grids”>

{{grid.title}}


<button (click)=“deleteGrid(grid)” danger>



home/home.scss

.grid-full ion-row {
height: 1%;
padding: 0%;
flex-wrap: wrap;
}

      .grid-full ion-col {
        flex: 0 0 0%;
        max-width: 0%;
        text-align:center;
        padding: 131px 3px;
      }
      
      .cell-1 {
        background-color: #C5DCFC;
      }


      .grid-full1 ion-col {
        flex: 0 0 0%;
        max-width: 0%;
        text-align:center;
        padding: 5px 10000px;
      }
       .cell-2 {
        background-color: #C5DCFC;
      }

      .grid-full2 ion-col {
        flex: 10 10 10%;
        max-width: 0%;
        text-align:right;
        padding: 0px 10000px;
        background-color: #C5DCFC;
      }

      .grid-full2 ion-col {
        flex: 10 10 10%;
        max-width: 0%;
        text-align:center;
        padding: 3px 1000%;
      }

      .grid-full2 ion-row {
        height:10%;
        padding: 2.5%;
        flex-wrap: wrap-reverse;
        background-color: transparentize($color: #C5DCFC, $amount: 1)
      }
      .grid-full2 ion-row{
        padding: 2.5%
        
      }