Как только элемент нажимается, приложение прокручивается до нужной точки. Высота заголовка изменяется наполовину. Я не понимаю почему. Что я могу сделать, чтобы этого не случилось? Может кто-нибудь мне помочь или объяснить? Заголовок
после события прокрутки - проблема
Заголовок для события прокрутки
Tab2. СТРАНИЦА. HTML:
<app-header></app-header>
<ion-content delegate-handle="myPageDelegate" fullscreen>
<ion-card>
<ion-card-header>
<ion-card-subtitle>Subtitle</ion-card-subtitle>
<ion-card-title>title</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-text>Text</ion-text>
</ion-card-content>
</ion-card>
<ion-item (click)='scrollToElement("brandenburg")'>
<ion-label color="primary">Brandenburg</ion-label>
<ion-badge slot="start">3</ion-badge>
</ion-item>
<ion-card id='brandenburg'>.... </ion-card>
</ion-content>
Tab2.PAGE.TS:
import { Component, ViewChild } from '@angular/core';
import { NavController, ModalController } from '@ionic/angular';
import { ImageModalPage } from '../../../image-modal/image-modal.page';
import { IonContent } from '@ionic/angular';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
@ViewChild(IonContent, { read: IonContent, static: false }) private content: IonContent;
constructor(private navCtrl: NavController, private modalController: ModalController) {}
push(path) {
this.navCtrl.navigateForward(path);
}
scrollToTop() {
this.content.scrollToTop(400);
}
ionViewDidEnter(){
this.scrollToTop();
}
scrollToElement(element) {
document.getElementById(element).scrollIntoView({behavior: "smooth", block: "center"});
}
}
HEADER.COMPONENT. HTML:
<ion-header>
<ion-toolbar>
<ion-title>
<img src="assets/images/logo.svg">
</ion-title>
<ion-buttons slot="end">
<ion-button (click)='presentPopover($event)'>
<ion-icon slot="start" name="more" color='light'></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button (click)='presentmenu($event)'>
<ion-icon slot="start" name="menu" color='light'></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
HEADER.COMPONENT .TS:
import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from './popover/popover.component';
import { MenuComponent } from './menu/menu.component';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
constructor(public popoverController: PopoverController) { }
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
translucent: false,
showBackdrop: true
});
return await popover.present();
}
async presentmenu(ev: any) {
const menu = await this.popoverController.create({
component: MenuComponent,
event: ev,
translucent: false,
showBackdrop: true
});
return await menu.present();
}
}
Меню встроено в заголовок слева и справа.