Space between search bar and Items//position of button

Ionic Framework ionic-v3
1

Hey:) I have a problem I implemented a search bar and now there is a space between the bar and the content (profiles). How can I get rid of this space? I know there should be the Items to be searched, but I have other items, the profiles. Do I have to implement them there, where the space is.

  1. How can I position the green button on the right side, central. I tried it with margin but that didn’t work.

Thanks in Advance

Here the code:
HTML

friends {{ item }}

Add



JanePrincess


Iceland, Reykjavik

Dean

Iceland, Reykjavik

Wayne

Iceland, Reykjavik

Pieii

Iceland, Reykjavik

Dude

Iceland, Reykjavik

de9md

Iceland, Reykjavik

TypeScript:

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);
  })

}
}

Here picture:2233

2

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.