Space between search bar and Items//position of button

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:

friends {{ item }}



Iceland, Reykjavik


Iceland, Reykjavik


Iceland, Reykjavik


Iceland, Reykjavik


Iceland, Reykjavik


Iceland, Reykjavik


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

selector: ‘lions-home’,
templateUrl: ‘lions.html’
export class LionsPage {

constructor(public navCtrl: NavController) {


initializeItems() {
this.items = [



getItems(ev) {
// Reset items back to all of the items

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

// 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

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.