2

I'm new to coding and I'm working with ionic 2 at the moment doing some practice apps. The problem I'm having is that I'm showing a popOver at the press of a button and inside the header part i am trying to use an item-divider between the title and subtitle. Whenever i try to move the divider up to get it close to the title this happens:

popover error

Is there a way to remove that space of the divider or make it smaller so that it doesn't cover up the title and make it look like an underline??

EDIT: here is the code inside the .

popover.html

<ion-row>
  <ion-title class="title">BRAND</ion-title>
</ion-row>

<ion-row>
  <ion-col width-100 class="divider">
    <ion-item-divider></ion-item-divider>
  </ion-col>
</ion-row>

<ion-row>
  <ion-item class="subTitle"no-lines>
    <p>Select your part</p>
  </ion-item>
</ion-row>

and popover.ts

  .title{
    text-align: center;
    padding-top: 5px;
  }

  .divider{
    margin-top: -15px;
  }

  .poPosition{
    padding-top: 100px!important;
  }

That's all im using at this moment.

Suhaib Janjua
  • 3,538
  • 16
  • 59
  • 73
drdream100
  • 103
  • 2
  • 8
  • 1
    Do share your code! It is hard to determine what is going wrong with your code. And also do put it up on plunkr or codepen.io so that we can debug it easily. – Smit Feb 22 '17 at 04:35

1 Answers1

7

I figured it out using element inspector in FireFox. i had to modify these values to resize the divider:

.item-inner{
min-height: 1px !important;
}

.label-md{
  margin-bottom: 1px!important;
  margin-top: 1px!important;
}

ion-item-divider{
  margin-top: 0px;
  min-height: 1px!important;
}
drdream100
  • 103
  • 2
  • 8