Search code examples
ionic2flexboxgrid-layout

ionic 2 grid problems with col-* / respnosive

I've got this code

<ion-grid>
      <ion-row wrap> 
        <ion-col col-2>
          <h3>Adresse</h3>
        </ion-col>
        <ion-col col-1 offset-1>
          <h3>Telefon</h3> 
        </ion-col>
        <ion-col col-4>
          <h3>Geb./Fam./Adelspräd.</h3>
        </ion-col>
        <ion-col col-2>
          <h3>Beruf/Stellung/Titel</h3>
        </ion-col>
        <ion-col col-2>
          <h3>KNR/Inhaber</h3>
        </ion-col>
      </ion-row>
    </ion-grid>

but it doesn't do anything with col-* attributes, like it's described in here https://ionicframework.com/docs/v2/api/components/grid/Grid/ I can't find any called css-classes. There just 5 cols with the same width

Bet when I take width-10, it reacts to what I'm doing.

At the end, I want something like this

<ion-col col-12 col-sm>
  1 of 4
</ion-col>

to get it responsive.

Thanks for your help!

Solution

  • It seams, that ionic doesn't support the whole flexbox-grid, and just knows the classes like width-*.

    To use the whole power of the flexbox-grid, I imported the original flexbox css-file and everything works fine.

    website of the flexbox-grid