Ionic app android, slider with grid. not full width with data or empty

[sdetweil]

I have this working ionic app on android and ios. it is a carousel of ion-slide of tables.(ion-row/ion-col)
one slide (of 4)

 <ion-slide class="theroot" width="100%" >
  <ion-header>
  <ion-toolbar >
  <ion-row>
    <ion-col col-1>
			<button ion-button  icon-only (click)="addeditClicked(1,getselectedRow('image'),'image',{true:'add',false:'edit'}[getselectedRow('image')<0])">
				<ion-icon [ios]="getselectedRow('image')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('image')<0 ? 'md-add':'md-search'"></ion-icon> 
			</button>				
		</ion-col>
		<ion-col col-10>Images</ion-col>
    <ion-col col-1>
			<button ion-button  icon-only (click)="menu()">
				<ion-icon [ios]="ios-menu" [md]="md-menu"></ion-icon> 
			</button>				
		</ion-col> 
	 </ion-row> 
  </ion-toolbar>
 <ion-toolbar > 
	<ion-row>	
		<ion-col col-3 class=" center">Name</ion-col>
		<ion-col col-3 class=" center">Tags</ion-col>
		<ion-col col-3 class=" center">Source</ion-col>
		<ion-col col-3 class=" center">Path</ion-col>
	</ion-row>						
</ion-toolbar>
</ion-header>
 <ion-content>
   <ion-refresher (ionRefresh)="doRefresh($event);">
    <ion-refresher-content 
      refreshingSpinner="circles"
      refreshingText="refreshing data, please wait">
    </ion-refresher-content>
 </ion-refresher> 
		<ion-row  *ngFor="let image of data.Images;let ii=index;"
												 (press)="deleterow(ii,'image')"
												 [ngClass]="{true:'selected',false:''}[ii == getselectedRow('image')]"
												 (dblTap)="addeditClicked(2, ii,'image','edit')"> 																										
		  <ion-col  item-content col-3 class = "colb center " (click)="setClickedRow(ii,'image','Name')">{{image.Name}}</ion-col>	
			<ion-col item-content col-3 class="colb center" (click)="setClickedRow(ii,'image','Tags')">
			<ion-list >
		     <ion-item no-lines class="center tag-background-transparent" [ngClass]="{true:'tag-text-white',false:''}[ii ==  getselectedRow('image')]" *ngFor="let tag of image.Tags">{{tagfromID(tag)}}</ion-item>
		   </ion-list>
			</ion-col>		
		 <ion-col item-content col-3 class = "colb center " (click)="setClickedRow(ii,'image','DataSource')"><ion-col>{{datasourcefromID(image.DataSource)}}</ion-col></ion-col>
		 <ion-col item-content col-3 class = "colb path" (click)="setClickedRow(ii,'image','PathFromSource')">{{image.PathFromSource}}</ion-col>				 						
		</ion-row>		
		</ion-content>				
  </ion-slide>

all worked as expected… just now back to it almost 2 years later…
to see all the data, I force rotation to landscape mode.

the problem…
if there is no data in the tables, it is full width

with data, the slide width is truncated. and the next slide shows.

it wasn’t like this 2 yrs ago… I haven’t updated anything in particular, altho this is a mac and the OS and gosh knows what else has been updated along the way.

[sdetweil]

so, this is a timing problem… If I remove the forced rotate to landscape, it works to rotate the phone manually

this is the handler that does the rotate.
it needs to tell angular that the data changed…
so I use zone.run() to do that

but the rotate hasn’t completed I guess and the renderer gets confused…

  ionViewDidLoad() 
  {
    console.log('ionViewDidLoad HomePage');
    // set to landscape
  		console.log("this device width=="+this.platform.width());
  		if(this.platform.width()<750 )
   		if(this.screenOrientation.type!=this.screenOrientation.ORIENTATIONS.LANDSCAPE)
  		{
                     this.screenOrientation.lock(
    			this.screenOrientation.ORIENTATIONS.LANDSCAPE);
		} 
    this.zone.run(() =>{
	    this.viewers=this.d.Viewers;
	    this.datasources=this.d.DataSources;
	    this.images=this.d.Images;
	    this.tags=this.d.Tags;
 	});
  }

I can’t do the rotate in the run(),
need a way to know if the rotate is complete

I see I can subscribe
this.screenOrientation.onChange().subscribe(

doesn’t help all the time…