Search code examples
angularresizeionic2popoverionic-popup

How to resize item-divider in ionic2

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.

Solution

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