Ion-content dont show over the full area

Hello,

I hope you can help me. I have the problem that when I try to access an object, ion-content is not displayed completely, but compressed as shown in the picture.
What can I do to prevent this. If you need any more information I can provide it.
I am new to this topic.

Thank you very much.


can you share your code?

Yes I try my best. I put this what i think it is nessessery, if something is missing, say me what you need too.

The change what the problem make is in the ts in the updateConnection() if i call the var (this.network.ip.length >= 7), if i comment it it look normaly.

home.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Router, NavigationExtras } from '@angular/router';
import { MediaService } from '../media.service';
import { ArtworkService } from '../artwork.service';
import { PlayerService } from '../player.service';
import { ActivityIndicatorService } from '../activity-indicator.service';
import { Artist } from '../artist';
import { Media } from '../media';
import { Network } from "../network";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  @ViewChild('artist_slider', { static: false }) artistSlider: IonSlides;
  @ViewChild('media_slider', { static: false }) mediaSlider: IonSlides;

  category =  'audiobook';

  artists: Artist[] = [];
  media: Media[] = [];
  network: Network;
  covers = {};
  activityIndicatorVisible = false;
  editButtonclickCount = 0;
  editClickTimer = 0;

  needsUpdate = false;

  slideOptions = {
    initialSlide: 0,
    slidesPerView: 3,
    autoplay: false,
    loop: false,
    freeMode: true,
    freeModeSticky: true,
    freeModeMomentumBounce: false,
    freeModeMomentumRatio: 1.0,
    freeModeMomentumVelocityRatio: 1.0
  };

  constructor(
    private mediaService: MediaService,
    private artworkService: ArtworkService,
    private playerService: PlayerService,
    private activityIndicatorService: ActivityIndicatorService,
    private router: Router
  ) {}

  ngOnInit() {
    this.mediaService.setCategory('audiobook');

    this.mediaService.getNetworkObservable().subscribe(network => {
      this.network = network;
    });
    
    this.mediaService.updateNetwork();
    
    // Subscribe
    this.mediaService.getMedia().subscribe(media => {
      this.media = media;

      this.media.forEach(currentMedia => {
        this.artworkService.getArtwork(currentMedia).subscribe(url => {
          this.covers[currentMedia.title] = url;
        });
      });
      this.mediaSlider?.update();

      // Workaround as the scrollbar handle isn't visible after the immediate update
      // Seems like a size calculation issue, as resizing the browser window helps
      // Better fix for this? 
      window.setTimeout(() => {
        this.mediaSlider?.update();
      }, 1000);
    });

    this.mediaService.getArtists().subscribe(artists => {
      this.artists = artists;

      this.artists.forEach(artist => {
        this.artworkService.getArtwork(artist.coverMedia).subscribe(url => {
          this.covers[artist.name] = url;
        });
      });
      this.artistSlider?.update();

      // Workaround as the scrollbar handle isn't visible after the immediate update
      // Seems like a size calculation issue, as resizing the browser window helps
      // Better fix for this? 
      window.setTimeout(() => {
        this.artistSlider?.update();
      }, 1000);
    });

    this.update();
  }

  ionViewWillEnter() {
    if (this.needsUpdate) {
      this.update();
    }
  }

  ionViewDidLeave() {
    if (this.activityIndicatorVisible) {
      this.activityIndicatorService.dismiss();
      this.activityIndicatorVisible = false;
    }
  }

  categoryChanged(event: any) {
    this.category = event.detail.value;
    this.mediaService.setCategory(this.category);
    this.update();
  }

  updateConnection() {
     if(this.network.ip.length >= 7){
       this.mediaService.setConnection('true');
     }else{
       this.mediaService.setConnection('false');
     }
  }

  update() {
    this.updateConnection();
    if (this.category === 'audiobook' || this.category === 'music') {
      this.mediaService.publishArtists();
    } else {
      this.mediaService.publishMedia();
    }
    this.needsUpdate = false;
  }

  artistCoverClicked(clickedArtist: Artist) {
    this.activityIndicatorService.create().then(indicator => {
      this.activityIndicatorVisible = true;
      indicator.present().then(() => {
        const navigationExtras: NavigationExtras = {
          state: {
            artist: clickedArtist
          }
        };
        this.router.navigate(['/medialist'], navigationExtras);
      });
    });
  }

  artistNameClicked(clickedArtist: Artist) {
    this.playerService.getConfig().subscribe(config => {
      if (config.tts == null || config.tts.enabled === true) {
        this.playerService.say(clickedArtist.name);
      }
    });
  }

  mediaCoverClicked(clickedMedia: Media) {
    const navigationExtras: NavigationExtras = {
      state: {
        media: clickedMedia
      }
    };
    this.router.navigate(['/player'], navigationExtras);
  }

  mediaNameClicked(clickedMedia: Media) {
    this.playerService.getConfig().subscribe(config => {
      if (config.tts == null || config.tts.enabled === true) {
        this.playerService.say(clickedMedia.title);
      }
    });
  }

  editButtonPressed() {
    window.clearTimeout(this.editClickTimer);

    if (this.editButtonclickCount < 9) {
      this.editButtonclickCount++;

      this.editClickTimer = window.setTimeout(() => {
        this.editButtonclickCount = 0;
      }, 500);
    } else {
      this.editButtonclickCount = 0;
      this.needsUpdate = true;
      this.router.navigate(['/edit']);
    }
  }
}

home.page.html

<ion-header>
    <ion-toolbar color="light">
        <ion-buttons slot="start">
            <ion-button disabled="true">
                <ion-icon slot="icon-only" name=""></ion-icon>
                <!-- Dummy button to center ion-segment -->
            </ion-button>
        </ion-buttons>
        <ion-segment value="{{this.category}}" (ionChange)="categoryChanged($event)">
            <ion-segment-button value="audiobook">
                <ion-icon name="book-outline"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="music">
                <ion-icon name="musical-notes-outline"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="playlist">
                <ion-icon name="document-text-outline"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="radio">
                <ion-icon name="radio-outline"></ion-icon>
            </ion-segment-button>
        </ion-segment>
        <ion-buttons slot="end">
            <ion-button (click)="editButtonPressed()">
                <ion-icon slot="icon-only" name=""></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div *ngIf="category === 'audiobook' || category === 'music'; then artistBlock else mediaBlock"></div>

    <ng-template #artistBlock>
        <ion-slides [options]="slideOptions" scrollbar="true" #artist_slider>
            <ion-slide *ngFor="let currentArtist of artists">
                <ion-grid>
                    <ion-row>
                        <ion-col size="12">
                            <ion-card class="circle-card">
                                <img (click)="artistCoverClicked(currentArtist)" draggable="false" style="-moz-user-select: none;" ondragstart="return false;" src="{{covers[currentArtist.name]}}">
                            </ion-card>
                        </ion-col>
                    </ion-row>
                    <ion-row class="title-card">
                        <ion-col size="12">
                            <ion-card (click)="artistNameClicked(currentArtist)">
                                <ion-card-header>
                                    <ion-card-title class="ion-text-nowrap truncate-text">{{currentArtist.name}}</ion-card-title>
                                </ion-card-header>
                            </ion-card>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-slide>
        </ion-slides>
    </ng-template>
    
    <ng-template #mediaBlock>
        <ion-slides [options]="slideOptions" scrollbar="true" #media_slider>
            <ion-slide *ngFor="let currentMedia of media">
                <ion-grid>
                    <ion-row class="media-card">
                        <ion-col size="12">
                            <ion-card class="media-card">
                                <img (click)="mediaCoverClicked(currentMedia)" draggable="false" style="-moz-user-select: none;" ondragstart="return false;" src="{{covers[currentMedia.title]}}">
                                <ion-card-header (click)="mediaNameClicked(currentMedia)">
                                    <ion-card-title class="ion-text-nowrap truncate-text">{{currentMedia.title}}</ion-card-title>
                                </ion-card-header>
                            </ion-card>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-slide>
        </ion-slides>
    </ng-template>
</ion-content>

mmm i cant try your code because i miss all the services. Anyway you can check if it’s a problem of “height” (because you use an if, maybe the first thing loaded is shorter then all your content)

If we can talk to discord or somthing I can give you all nessesery parts.
I can give you the github repo from where i use the code, but I change some things.