seachbarとアイテムの間のスペースを削除する//緑色のボタンを配置する方法

Question

私は検索バーを実装しましたが、今度はバーとコンテンツ（プロファイル）の間にスペースがあります。どうすればこのスペースを取り除くことができますか？私は検索するアイテムがあるべきであることを知っていますが、私は他のアイテム、プロファイルを持っています。スペースがあるところで、そこに実装する必要がありますか？

中央の右側に緑色のボタンを配置するにはどうすればよいですか。私は余裕を持って試しましたが、うまくいかなかったのです。

HTML：

<ion-header> 
    <ion-navbar color="rank"> 
    <ion-title> 
     friends 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <ion-content> 
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 
    <ion-list> 
    <ion-item *ngFor="let item of items"> 
     {{ item }} 
    </ion-item> 
    </ion-list> 
</ion-content> 


<ion-list> 
    <ion-item> 

<button ion-button color="rank" round>Add </button> 
    <ion-avatar item-start> 
     <img src="img/fri.jpg"> 
    </ion-avatar> 
    <h1>JanePrincess</h1> 
    <h3>Iceland, Reykjavik </h3> 




    </ion-item> 

    <ion-item> 
    <ion-avatar item-start> 
     <img src="img/hot.jpg"> 
    </ion-avatar> 
    <h1>Dean</h1> 
    <h3>Iceland, Reykjavik </h3> 



    </ion-item> 

    <ion-item> 
    <ion-avatar item-start> 
     <img src="img/top.jpg"> 
    </ion-avatar> 
    <h1>Wayne</h1> 
    <h3>Iceland, Reykjavik </h3> 



    </ion-item> 

    <ion-item> 
    <ion-avatar item-start> 
     <img src="img/loc.jpg"> 
    </ion-avatar> 
    <h1>Pieii</h1> 
    <h3>Iceland, Reykjavik </h3> 



    </ion-item> 

    <ion-item> 
    <ion-avatar item-start> 
     <img src="img/top.jpg"> 
    </ion-avatar> 
    <h1>Dude</h1> 
    <h3>Iceland, Reykjavik </h3> 



    </ion-item> 

    <ion-item> 
    <ion-avatar item-start> 
     <img src="img/fri.jpg"> 
    </ion-avatar> 
    <h1>de9md</h1> 
    <h3>Iceland, Reykjavik </h3> 



    </ion-item> 

</ion-list> 

</ion-content> 

活字体：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'lions-home', 
    templateUrl: 'lions.html' 
}) 
export class LionsPage { 
    items; 

    constructor(public navCtrl: NavController) { 
    this.initializeItems(); 

    } 

initializeItems() { 
    this.items = [ 

    ]; 

} 

getItems(ev) { 
    // Reset items back to all of the items 
    this.initializeItems(); 

    // set val to the value of the ev target 
    var val = ev.target.value; 

    // if the value is an empty string don't filter the items 
    if (val && val.trim() != '') { 
     this.items = this.items.filter((item) => { 
     return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
} 
} 
} 

Answer 1

あなたが検索バーの上に余分な<ion-content>を持っています。