Content wont get rendered if behind footer

Ionic Framework Ionic Angular
1

Hey,

im currently facing the strange “bug” that components which are behind my footer wont get rendered.
My behavior: i have some controls in my footer like a navbar and i added a possibility to make the footer kinda fullscreen for bigger buttons and clearer interface.

thats the page behind the footer which should get rendered:

image
image476×867 27.3 KB

at the bottom is the footer with one button. For testing i added a button to enlarge the footer on the right.

the footer in full size looks like:

image
image474×870 28.4 KB

so when i start the app where the footer is initially full size and then close / make it small.
the page behind it is empty only the background is rendered - also the DOM is empty.

the only changes between the different footer sizes is the hight: “height: 100vh;” and i add a background.

is there any possibility to force the rendering or trigger a refresh?

2

@b5518388 try to share some of the code so anyone of us be able to help you and check what is goes on.
Thanks!

3 
<ion-header>
...
</ion-header>
<ion-content #content class="chat-room">
<div id="groupChatDiv" *ngIf="!groupChatByWorkflowShowChat">

    <div class="md-cards">
      <div class="md-card-cont">
        <ng-container *ngFor="let workflow of workflows;">
          <ng-container *ngIf="workflow.c.length > 0">
<span class="messages-block-date">{{workflow.name}}</span>
            <ion-slides>  [...]
</ion-content>

<ion-footer class="messages-block-date" [ngClass]="bigFooter ? 'fullScreenFooter' : 'normalFooter'">  
<ion-slides *ngIf="!bigFooter"
    [options]="slideOpts"    (ionSlideDidChange)="slideDidChange()"  #slider  >
    <ion-slide>
      <ion-toolbar class="ion-footer-toolbar">
[...]
</ion-footer>

just some in my opinion normal code - nothing special.

here the two different footer classes:

.fullScreenFooter {
  height: 100vh;
  --background: transparent;
  background: var(--background-color) url(/assets/imgs/background.jpg) no-repeat top center;
  background-size: auto 100vh;
}

.normalFooter{
  height: 80px;  
}

also nothing too fancy.

here is the ion-content from the DOM of the page when the app starts with the full sized footer:

<ion-content _ngcontent-giw-c1="" class="chat-room md hydrated" style="--offset-top:0px; --offset-bottom:0px;"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div _ngcontent-giw-c1="" id="groupChatDiv"><div _ngcontent-giw-c1="" class="md-cards"><div _ngcontent-giw-c1="" class="md-card-cont"><!--bindings={
  "ng-reflect-ng-for-of": ""
}--></div></div></div><!--bindings={
  "ng-reflect-ng-if": "false"
}--></ion-content>

its kinda empty :confused:

hope this will/can help

4

Found the problem… was my fault… on deeper digging i found out what i need to init my childview (slider) which is only done on the “small” footer.

can be closed. sorry