flexGrow case on iOS stopped working after 4.1



Anyone else experience something like this:

before going to 4.1 I had a screen that was properly spaced ( the site names expand to fill space) like this:

however after upgrading to 4.1 on IOS the screen looks like this:

The culprit seems to be the flexGrow on the item.station_name flex box (maybe has to be inside of a ListView?) Here is part of the code:

<FlexboxLayout flexGrow="1">
  <ListView [items]="sites | sitesPipe : selectedGroup">
    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
    <FlexboxLayout alignItems="center" [class.evenRow]="even" [class.oddRow]="odd">
      <FlexboxLayout alignItems="center" justifyContent="center" height="50" width="50" (tap)="popupSiteInfo(item)">
        <Label text="{{ item.file_url ? cameraIcon : infoIcon }}" class="icon"></Label>
      <FlexboxLayout alignItems="center" height="50" flexGrow="1" (tap)="toggleSite(item)">
        <Label [text]="item.station_name" textwrap="true"></Label>
      <FlexboxLayout alignItems="center" justifyContent="center" height="50" width="50" (tap)="toggleSite(item)">
        <Label text="{{ item.selected == true ? radioCheckedIcon : radioUncheckedIcon }}"

Should I be doing this a different way or is there a bug in 4.1 or ??


I think I can fix it by adding width=“100%” to the flexbox directly inside the ng-template like so:

<FlexboxLayout alignItems="center" [class.evenRow]="even" [class.oddRow]="odd" width="100%">

But it’s a bit of a mystery to me why, and there are many other spots in my app where a similar change would need to be made.