Блог

Я новичок в ионике. Я использую директиву для липкой строки поиска. Когда я запускаю приложение, в верхней части экрана появляется большое пустое пространство, от которого я не знаю, как избавиться. Я пробовал изменить некоторые CSS, но ничего не исправит. Этой проблемы не было до добавления строки поиска. Буду признателен за любые советы по оказанию помощи.

Tab1.page.html:

 lt;ion-content [appParallax]="imagebox" scrollEvents="true" [appStickySearch]="searchbox"gt;   lt;div class="search-box" #searchboxgt;  lt;div class="background"gt;lt;/divgt;  lt;ion-item lines="none"gt;  lt;ion-icon name="search-outline" color="primary"gt;lt;/ion-icongt;  lt;ion-input placeholder="Search..." button routerLink="/tabs/tab1/search"gt;lt;/ion-inputgt;  lt;/ion-itemgt;  lt;/divgt;   lt;div class="image-box" #imageboxgt;  lt;div class="overlay"gt;lt;/divgt;  lt;img src="/assets/stage-pic.png" gt;  lt;p class="pic-text"gt;  Find a venue for your band  or share a venuelt;/pgt;  lt;/divgt;  

Вкладка 1.страница.scss:

 .image-box {  background: #000;  color: #fff;  padding-left: 40px;  padding-top: 40px;  padding-bottom: 20px;   img {  will-change: transform;  }   p {  font-size: x-large;  max-width: 50%;  }   .overlay {  background: #fff;  position: absolute;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  z-index: 1;  opacity: 0;  } }  .search-box {  ion-item {  width: 90vw;  margin: auto;  display: block;  border-radius: 20px;  text-align: center;  }   position: sticky;  top: 100px;  padding-top: 20px;  padding-bottom: 10px;  z-index: 3;   .background {  position: absolute;  width: 100%;  top: -50px;  height: calc(100%   50px);  background: #fff;  opacity: 0;  border-bottom: 1px solid var(--ion-color-step-150);  } }  

sticky-search.directive:

 export class StickySearchDirective implements OnInit {  @Input('appStickySearch') searchEl: any;  private backgroundEl: any;   constructor(private renderer: Renderer2, private domCtrl: DomController) { }   ngOnInit() {  this.backgroundEl = this.searchEl.getElementsByClassName('background')[0];  }   @HostListener('ionScroll', ['$event']) onContentScroll($event: any) {  const currentY = $event.detail.currentY;  let move = 0;  let opacity = 0;  console.log(currentY);  if (currentY gt; 300 amp;amp; currentY lt;= 420) {  move = (currentY - 300) / 1.6;  opacity = (currentY - 300) / 120;  }   this.domCtrl.write(() =gt; {  if (move !== 0) {  this.renderer.setStyle(this.searchEl, 'webkitTransform',  `translate3d(0, -${move}px, 0)`);  this.renderer.setStyle(this.backgroundEl, 'opacity', opacity);  document.documentElement.style.setProperty('--ion-item-background', '#F6F6F6');  }  if (currentY lt; 250) {  document.documentElement.style.setProperty('--ion-item-background', '#FFF');  }  });  } }  

Спасибо