IONIC - Grid Responsive

Navigation
0

Good afternoon,

I have the following GRID with IONIC, it looks like this: 

<ion-grid>
    <ion-row class="cell-2">
      <ion-col>
        Código
      </ion-col>
      <ion-col>
        Nome
      </ion-col>
      <ion-col>
        Tipo
      </ion-col>
      <ion-col>
        Descricao
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let item of dados" class="cell-1">
      <ion-col>
        {{item.CODIGO}}
      </ion-col>
      <ion-col>
        {{item.NOME}}
      </ion-col>
      <ion-col>
        {{item.TIPO}}
      </ion-col>
      <ion-col>
        {{item.DESCRICAO}}
      </ion-col>
    </ion-row>
  </ion-grid>

However, when viewing it on your phone it looks like this:

MyCSSlookslikethis:

page-cadastrar-ferramenta{.cell-1{background-color:#C5DCFC;}.cell-2{background-color:#262B69;color:white;}}

CanyouhelpmemakeGRIDresponsivetomobiledevices?

Myactionthatreturnsthedataisasfollows:

listar(){letdata={"token" : ""
  };

    this.http.get('http://www.ferramentasapi.sa-east-1.elasticbeanstalk.com/api/ferramentas', data, {})
    .then(data => {

      console.log(JSON.parse(data.data).rows); // data received by server
      this.dados = JSON.parse(data.data).rows;

    })
    .catch(error => {


    });
  }
    
asked by anonymous 03.12.2018 / 20:29

1 answer

1

Assuming you want columns all of the same size, the html should have the following format: 

<ion-grid>
<ion-row>
  <ion-col col-3>
    Código
  </ion-col>
  <ion-col col-3>
    Nome
  </ion-col>
  <ion-col col-3>
    Tipo
  </ion-col>
  <ion-col col-3>
    Descricao
  </ion-col>
</ion-row>
<ion-row *ngFor="let item of dados">
  <ion-col col-3>
    {{item.CODIGO}}
  </ion-col>
  <ion-col col-3>
    {{item.NOME}}
  </ion-col>
  <ion-col col-3>
    {{item.TIPO}}
  </ion-col>
  <ion-col col-3>
    {{item.DESCRICAO}}
  </ion-col>
</ion-row>

'ion-row' always occupies 100% of the available width. The size treatment should be given in the columns. This grid system works on 12 columns, new we will want 4 columns of 3, which gives 12.

    
03.12.2018 / 20:35
Group By show when not in table InnerJoin with 3 tables Mysql [closed]