How to make all columns in one row in ion-grid

user_10120711 0
Viewed 119

In my ionic 3 project, I want to display a grid with many rows and columns. As the number of columns is large, the columns are separated into several parts and displayed in several rows.

How can squeeze the column's size and display all cloumns in one row?

.ts

  patternXY: any = [];
  patRowY = 120;
  patColX = 100;
  ...
  for(let y = 0; y < this.patRowY; y++) {
      let rowY = []
      for(let x = 0; x< this.patColX; x++){
        rowY.push(0)
      }
      this.patternXY.push(rowY);
    }

.html

<ion-grid >
  <ion-row *ngFor="let item of patternXY; index as i" no-padding>
    <ion-col *ngFor="let item of patternXY[i]; index as j" class="bgcolor" size="auto">
    </ion-col>
  </ion-row>
</ion-grid>

.sccs

.bgcolor {
  background: #cdcfd6;
}

ion-col {
  border: 0.1px solid #aeb7ca;
}

enter image description here

In above example, the number of columns in one row is set to 100. But you can see the only 30 cloumns are drawn in 1st row. 2nd Row has another 30, 3rd Row has another 30 and 4th Row has 10. I want all 100 columns are displayed in one row. That need decrease the cloumns' width. But I could not find a solution.

ionic3 css
1 Answers

The size of the squares is coming from the padding, the default padding is 10px and you've to set it to a lower value or 0 to reduce the width of the squares.

I tried it on this page by altering CSS for the padding and HTML for the amount of cols: https://ionicframework.com/docs/api/grid and it displayed all cols in one row without break.

More detailed the padding isn't exactly for the cols themselves (might depend on your CSS though) but for the included divs:

      .ion-col > div {
        background-color: #f7f7f7;
        border: solid 1px #ddd;
        padding: 10px;
      }

Depending on your CSS and HTML the required solution might differ slightly but I hope you get the idea.

user_10198500
Related