CODEWITHSUNDEEP
htmlcssionic2gridresponsive
ernes3
ernes3

Reputation: 101

Responsive grid - IONIC 2

I need you help to make this grid. When I resize the window, the grid does not retain the initial shape. I need the grid to be responsive and I can not do it. I tried so much times with many modifications

enter image description here

This is my code so far.

page-home {

*{
    margin: 0;
    padding: 0;
}
ion-header{
    background-color: #fff;
    height: 3em;
    width: 100%;
    font-size: 15px;
}

ion-toolbar{
    height: 1em;
    padding: 0;
    width: auto;
    display: block;
}


.toolbar-md{
    padding: 4px;
    min-height: 40px;
    padding-left: 40px;

}

ion-toolbar.logo img{
    height: 1.3em;

}

ion-toolbar.container{
    color: #fff!important;
}

ion-content{
    margin: 80px 0px;
    min-height: 56vh;
}

ion-col.info{
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd!important;
}

ion-row.title ion-col{
    text-align: center;
    font-weight: bold;
    background-color: #eee;
    border: 1px solid #ddd!important;
}

ion-grid.footer-table{
    width: 30%;
}

}
<ion-content>
    <ion-grid fixed>

      <!-- Titles -->

      <ion-row class="title"> 
        <ion-col col-2>
          EVENT
        </ion-col>
        <ion-col col-2>
          ORIGIN
        </ion-col>
        <ion-col col-2>
          DESTINY
        </ion-col>
        <ion-col col-2>
          ERRORS
        </ion-col>
        <ion-col col-2>
          FIRST EVENT
        </ion-col>
        <ion-col col-2>
          LAST EVENT
        </ion-col>
      </ion-row>

      <!-- Data -->
      <ion-row class="inforow">
        <ion-col class="info" col-2>
            ETA
        </ion-col>
          <ion-col class="info" col-2>
            SLI
          </ion-col>
          <ion-col class="info" col-2>
            ODBMS
          </ion-col>
          <ion-col class="info" col-2>
            6          
          </ion-col>
          <ion-col class="info" col-2>
            04/08/2017
          </ion-col>
          <ion-col class="info" col-2>
            04/08/2017
          </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

Please let me know any way to solve this problem.

Thanks

Upvotes: 2

Views: 1400

Answers (2)

Sampath
Sampath

Reputation: 65860

The Ionic grid is by default responsiveness.So you have a problem with your custom CSS styles.The best thing here is start from scratch.That means without applying your styles.After that apply it one by one and see where it brakes the Grid.That way you can find out the issued CSS.

The grid is a powerful mobile-first flexbox system for building custom layouts. It is heavily influenced by Bootstrap's grid system.

The grid is composed of three units — a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be fully customized using Sass.

You can get huge knowledge about this grid system using official doc here.

Upvotes: 0

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

Just use de columns attributes from Ionic itself, it's responsive by default

Using only col-2 will make all columns be 2 space wide in all viewports, since you can have 12 columns in a grid this'll be 6 columns.

If you want the grid to have different sizes in different displays you'll need an attribute for every display you want, beeing them:

  • col-* or col-xs-*: the same size for every viewport.
  • col-sm-*: for 540px and above.
  • col-md-*: for 720px and above.
  • col-lg-*: for 940px and above.
  • col-xl-*: for 1140px and above.

One attribute override other. So it's much like Bootstrap grid component (if you have already worked with Bootstrap).

See the docs for more info: https://ionicframework.com/docs/api/components/grid/Grid/

Hope this helps.

Upvotes: 2

Related Questions