# Ion-content not rendering in ion-slide version 4

**URL:** <https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736>\
**Category:** Ionic Framework\
**Created:** [November 16, 2019, 3:33pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736 "2019-11-16T15:33:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 16, 2019, 3:33pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/1 "2019-11-16T15:33:41Z")

</div>

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

 ![2019-11-16%20(1)](https://global.discourse-cdn.com/ionicframework/original/3X/0/6/062e1a99388d5006fdb5350d9f094ec0faf45be6.png)

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

 ![2019-11-16%20(2)](https://global.discourse-cdn.com/ionicframework/original/3X/a/d/adf42e646d8dc1b4fd6e8a338f56cf1f25744ad3.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 16, 2019, 3:35pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/2 "2019-11-16T15:35:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 16, 2019, 4:01pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/3 "2019-11-16T16:01:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 17, 2019, 6:10pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/4 "2019-11-17T18:10:00Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 18, 2019, 1:52pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/5 "2019-11-18T13:52:19Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![gokujy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gokujy/32/117753_2.png) [@gokujy](https://forum.ionicframework.com/u/gokujy)\
**Post date:** [November 18, 2019, 2:08pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/6 "2019-11-18T14:08:21Z")

</div>

So you want to add css? or something else?

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 18, 2019, 2:47pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/7 "2019-11-18T14:47:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gokujy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gokujy/32/117753_2.png) [@gokujy](https://forum.ionicframework.com/u/gokujy)\
**Post date:** [November 18, 2019, 2:54pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/8 "2019-11-18T14:54:16Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 18, 2019, 3:28pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/9 "2019-11-18T15:28:32Z")

</div>

> [@gokujy](#):
>
> you can use the page selector

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

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

```

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

```auto
<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

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

```

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 18, 2019, 7:54pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/10 "2019-11-18T19:54:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdetweil](https://avatars.discourse-cdn.com/v4/letter/s/e19b73/32.png) [@sdetweil](https://forum.ionicframework.com/u/sdetweil)\
**Post date:** [November 19, 2019, 5:32pm UTC](https://forum.ionicframework.com/t/ion-content-not-rendering-in-ion-slide-version-4/177736/11 "2019-11-19T17:32:44Z")

</div>

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

 ![2019-11-19](https://global.discourse-cdn.com/ionicframework/original/3X/f/9/f97cfc12ed920941c01794a67dceee9bdbad24e3.png)

```auto
<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 >

```