How to resize item-divider in ionic2

Question

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.

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
– Smit, Commented Feb 22, 2017 at 4:35

drdream100 · Accepted Answer · 2017-02-23 23:50:55Z

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

Collectives™ on Stack Overflow

How to resize item-divider in ionic2

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related