Ionic@2.1.0 row/button CSS change(?)

Ionic Framework ionic-v3
1

I just updated my Ionic version from 2.0.1 to 2.1.0 and I found
my ion-list > ion-item > ion-row containing three buttons side by side and taking 100% of the horizontal space now stacks the buttons vertically (and each button is 100% wide).

The 2.0.1 markup was:

  <ion-list>
    <ion-item *ngFor="let map of maps">
          <ion-row>
            <button ion-button icon-left full color="primary"(click)="createCourse(map)"><ion-icon name="construct"></ion-icon><label>Layout</label></button>
            <button ion-button icon-left full color="secondary" (click)="editMap(map)"><ion-icon name="md-create"></ion-icon><label>Edit</label></button>
            <button ion-button icon-left full color="ternary" (click)="more(map)"><ion-icon name="more"></ion-icon><label>More</label></button>
          </ion-row>
    </ion-item>
  </ion-list>

In 2.1.0 I had to add nowrap to the ion-row element to put the buttons on the same line:

  <ion-list>
    <ion-item *ngFor="let map of maps">
          <ion-row nowrap>
            <button ion-button icon-left full color="primary"(click)="createCourse(map)"><ion-icon name="construct"></ion-icon><label>Layout</label></button>
            <button ion-button icon-left full color="secondary" (click)="editMap(map)"><ion-icon name="md-create"></ion-icon><label>Edit</label></button>
            <button ion-button icon-left full color="ternary" (click)="more(map)"><ion-icon name="more"></ion-icon><label>More</label></button>
          </ion-row>
    </ion-item>
  </ion-list>

Don’t know if this behavior was expected; maybe this will save some other folks some debugging.

2 Likes