Ion-content not rendering in ion-slide version 4

i have the configurator app, 4 datatypes, 4 pages in a ion-slides, with a slide per data type.
it was working on V1, and ok on V3 after updates… now on v4, the slider works, and the header for each slide shows, but the data does not.
the data is generated with an ngFor loop, it COULD cause vertical scrolling, only of the data portion , not the header. it took quite a while to get the layout and operations working. popup dialogs over selected rows allow edit or create, or delete… each data item has a pull to refresh.

these are all constructed as a single homepage.html, as imbed of the sub datatype pages has never worked.

but, if I remove the ion-content of a data item, then the content gets generated, but off to the side.

I am testing this on web (with ionic serve) , before going to test on ios/android devices

here is 1st page without ion-content

here is second page with ion-content still present (page source posted at end)

<ion-content (ionFocus)="focusChanged('focus')" ng-focus="focusChanged('focus')" (ionBlur)="focusChanged('blur')"> 
<ion-slides loop="true" id="loopSlider" autoHeight="true">
  <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('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
				<ion-icon [ios]="getselectedRow('viewer')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon> 
			</button>					
		</ion-col>
		<ion-col col-10>Viewers</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-4 class=" center">Name</ion-col>
		<ion-col col-3 class=" center">Tags</ion-col>
		<ion-col col-2 class=" center">Advance</ion-col>
		<ion-col col-1 class=" center">Rate</ion-col>
		<ion-col col-2 class=" center">Active</ion-col>
	</ion-row>			
 </ion-toolbar> 
  </ion-header>
   	<div>foobar</div>
<!--ion-content no-padding -->   

  <ion-refresher slot="fixed"  (ionRefresh)="doRefresh($event);">
    <ion-refresher-content 
      refreshingSpinner="circles"
      refreshingText="refreshing data, please wait">
    </ion-refresher-content>
 </ion-refresher> 

	<ion-row  *ngFor="let viewer of data.Viewers;let i=index" 
			[ngClass]="{true:'selected',false:''}[i ==  getselectedRow('viewer')]"                        
			(dblTap)="addeditClicked(2,i,'viewer','edit')" nowrap
			(press)="deleterow(i,'viewer')"			 
			 >

		<ion-col  col-4  (click)="setClickedRow(i,'viewer','Name')">{{viewer.Name}}</ion-col>
		<ion-col  col-3 class="colb   center" (click)="setClickedRow(i,'viewer','Tags')">
		   <ion-list >
		     <ion-item no-lines class="center tag-background-transparent" [ngClass]="{true:'tag-text-white',false:''}[i ==  getselectedRow('viewer')]" *ngFor="let tag of viewer.Tags">{{tagfromID(tag)}}</ion-item>
		   </ion-list>
 		</ion-col>
		<ion-col col-2 class = " colb  center " (click)="setClickedRow(i,'viewer','Advance')">{{viewer.Advance}} </ion-col>
		<ion-col col-1 class = " colb  center" (click)="setClickedRow(i,'viewer','RefreshRate')">{{viewer.ImageRefreshRate}}</ion-col>
		<ion-col col-2 class = "col colb  center" (click)="setClickedRow(i,'viewer','Active')">{{viewer.Active}}</ion-col>
	</ion-row>
<!-- /ion-content -->
  </ion-slide>
<!--  for datasources -->
	<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('datasource'),'datasource',{true:'add',false:'edit'}[getselectedRow('datasource')<0])">
				<ion-icon [ios]="getselectedRow('datasource')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('datasource')<0 ? 'md-add':'md-search'"></ion-icon> 
			</button>				
		</ion-col>
		<ion-col col-10>Datasources</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-2 class=" center">Type</ion-col>
		<ion-col col-2 class=" center">Active</ion-col>
		<ion-col col-5 class=" center">Root</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 datasource of data.DataSources;let ds =index;"									
										  (press)="deleterow(ds,'datasource')"
										  [ngClass]="{true:'selected',false:''}[ds == getselectedRow('datasource')]"
										  (dblTap)="addeditClicked(2,ds,'datasource','edit')">
		 <ion-col col-3 class = "colb " (click)="setClickedRow(ds,'datasource','Name')">{{datasource.Name}}</ion-col>
		 <ion-col col-2 class = "colb center" (click)="setClickedRow(ds,'datasource','Type')">{{datasource.Type.Type}}</ion-col>
		 <ion-col col-2 class = "colb center" (click)="setClickedRow(ds,'datasource','Active')">{{datasource.Active}}</ion-col> 
		 <ion-col col-5 align="left" class="colb path" (click)="setClickedRow(ds,'datasource','Root')">{{datasource.Root}}</ion-col>
	</ion-row>
		</ion-content>
  </ion-slide>
<!--- for images --->
  <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>
 <!--- for tags --->
  <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('tag'),'tag',{true:'add',false:'edit'}[getselectedRow('tag')<0])">
				<ion-icon [ios]="getselectedRow('tag')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('tag')<0 ? 'md-add':'md-search'"></ion-icon> 
			</button>				
		</ion-col>
		<ion-col col-10>Tags</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-4 class="center">Value</ion-col>
			<ion-col col-8 class="center">Description</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 tag of data.Tags;let tt=index"
												(press)="deleterow(tt,'tag')"
												 [ngClass]="{true:'selected',false:''}[tt == selectedRow.tag]"
												 (dblTap)="addeditClicked(2, tt,'tag','edit')">
			 <ion-col col-4 class = "colb center " (click)="setClickedRow(tt,'tag','Value')">{{tag.value}}</ion-col>
			 <ion-col col-8 class = "colb" (click)="setClickedRow(tt,'tag','Description')">{{tag.Description}}</ion-col>
	</ion-row>
</ion-content>
</ion-slide>
</ion-slides>
</ion-content> 
<ion-footer>
  <ion-toolbar >

    <ion-buttons left>
      <button ion-button  (click)="back()">
      	<ion-icon md="md-arrow-round-back" ios="ios-arrow-back"></ion-icon>-Back
      </button>
    </ion-buttons>

    <ion-buttons right>
      <button ion-button (click)="next()">Next-
      		<ion-icon md="md-arrow-round-forward" ios="ios-arrow-forward"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

one other thing, in the ngfor, there are calls to little routines to determine if the line is selected, to change the class for highlighting… those routines are still called (i see the logging in browser dev window)… so the ngfor is executing inside the ion-content

also, just noticed the ion-footer doesn’t show

this is the generated content of the ion-content section
so the ngFor loops all work, the content is present.

<ion-content _ngcontent-nbg-c1="" class="ion-no-padding md hydrated" style="--offset-top:0px; --offset-bottom:0px;">
	<ion-refresher _ngcontent-nbg-c1="" slot="fixed" class="md refresher-md hydrated">
		<ion-refresher-content _ngcontent-nbg-c1="" refreshingspinner="circles" refreshingtext="refreshing data, please wait" ng-reflect-refreshing-spinner="circles" ng-reflect-refreshing-text="refreshing data, please wait" class="md hydrated">
			<div class="refresher-pulling">
				<div class="refresher-pulling-icon">
					<ion-icon role="img" class="md hydrated" aria-label="arrow down">
					</ion-icon>
				</div>
			</div>
			<div class="refresher-refreshing">
				<div class="refresher-refreshing-icon">
					<ion-spinner class="md spinner-circles hydrated" role="progressbar">
					</ion-spinner>
				</div>
				<div class="refresher-refreshing-text">refreshing data, please wait</div>
			</div>
		</ion-refresher-content>
	</ion-refresher>
	<!--bindings={  "ng-reflect-ng-for-of": "[object Object],[object Object"}-->
	<ion-row _ngcontent-nbg-c1="" nowrap="" class="not-selected md hydrated" ng-reflect-ng-class="not-selected">
		<div _ngcontent-nbg-c1="">Something kristi</div>
		<ion-col _ngcontent-nbg-c1="" col-4="" class="md hydrated">Something kristi</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-3="">
			<ion-list _ngcontent-nbg-c1="" class="md list-md hydrated">
				<!--bindings={  "ng-reflect-ng-for-of": "5d3885dacc871e187172505b"}-->
				<ion-item _ngcontent-nbg-c1="" class="center tag-background-transparent item md in-list ion-focusable hydrated" no-lines="" ng-reflect-klass="center tag-background-transpar" ng-reflect-ng-class="">Kristi</ion-item>
			</ion-list>
		</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-2="">8 </ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-1="">15</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="col colb center md hydrated" col-2="">true</ion-col>
	</ion-row>
	<ion-row _ngcontent-nbg-c1="" nowrap="" class="not-selected md hydrated" ng-reflect-ng-class="not-selected">
		<div _ngcontent-nbg-c1="">Something charlie</div>
		<ion-col _ngcontent-nbg-c1="" col-4="" class="md hydrated">Something charlie</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-3="">
			<ion-list _ngcontent-nbg-c1="" class="md list-md hydrated">
				<!--bindings={  "ng-reflect-ng-for-of": "5d3885e9cc871e187172505c"}-->
				<ion-item _ngcontent-nbg-c1="" class="center tag-background-transparent item md in-list ion-focusable hydrated" no-lines="" ng-reflect-klass="center tag-background-transpar" ng-reflect-ng-class="">Charlie</ion-item>
			</ion-list>
		</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-2="">8 </ion-col>
		<ion-col _ngcontent-nbg-c1="" class="colb center md hydrated" col-1="">20</ion-col>
		<ion-col _ngcontent-nbg-c1="" class="col colb center md hydrated" col-2="">true</ion-col>
	</ion-row>
</ion-content>

i don’t see where it uses my stylesheet, altho it is shown as loaded in the page debugger source view
I set the ‘theroot’ class as background=yellow, but don’t see that applied

i see the stylesheet main.page.scss, starts with page-home{ which is NOT the id of the page in actual use…

if I take off the id, then the classes work…

but that was generated by the page creation … why doesn’t it work?
the selector in home.page.ts is ‘page-home’

So you want to add css? or something else?

i have custom classes, yes… in prior versions i put them into the scss file…they are page/dialog specific

If you want to add common CSS then add in global.scss file. you can use the page selector
ex:

app-home {
     ion-content {
        --background: #fff url('assets/imgs/intro.png') no-repeat center center / cover;
    }
 }

the question is WHY does the page selector for the page not work?

@Component({
  selector: 'page-home',
  templateUrl: 'home.page.html',
  styleUrls: [ 'home.page.scss' ]
})

this is the content generated for the home.page.html injection

<page-home _nghost-dfu-c1="" class="ion-page" style="z-index: 101;">
<ion-content _ngcontent-dfu-c1="" ng-focus="focusChanged('focus')" class="md hydrated" style="--offset-top:0px; --offset-bottom:0px;">
<ion-slides _ngcontent-dfu-c1="" autoheight="true" id="loopSlider" loop="true" class="md slides-md swiper-container hydrated swiper-container-initialized swiper-container-horizontal">

my html starts

<ion-content (ionFocus)="focusChanged('focus')" ng-focus="focusChanged('focus')" (ionBlur)="focusChanged('blur')"> 
<ion-slides loop="true" id="loopSlider" autoHeight="true">

well the page selector value isnt what i thought. its where the page content is inserted into the shadow dom

finally got it mostly working… the key was display:block on the ion-slide tag.

I have some alignment problems which I still haven’t figured out… align:center on the ion-col doesn’t

<ion-content (ionFocus)="focusChanged('focus')" ng-focus="focusChanged('focus')" (ionBlur)="focusChanged('blur')" style="max-height:93%"> 
<ion-slides [options]="slideOptions" id="loopSlider" #mySlider style="height:100%">
  <ion-slide class="header" width="100%" style="height:100%; display:block; " >	
  <ion-header >