Ionic2 common css styles, how to?

Ionic Framework ionic-v3
10

well yes this can be done with some tricky ways.
you will realise that ionic add the element <ion-reorder> to the list which becomes the icon.

We cannot simply make it disappear by using css “display: none”, becuz in order to get the reordering function working we still need it there and replace it with a place holder to be dragged with.

Here’s what i will do, <ion-reorder> has a child called <ion-icon> which IS the icon itself.
Let’s override the color and make it transparent, so it looks like it’s gone:

#myModel {
    ion-reorder ion-icon {
        color: transparent;
    }
}

What we hv done here, is that we make the icon invisible but the button is still there for u to drag around.
now then we still need to add sth back to it so we know it’s there.
We do this by giving the <ion-reorder> element a background-image.

#myModel {
    ion-reorder ion-icon {
        color: transparent;
    };
    ion-reorder {
        background-image: url("youricon.png");
    };
}

I think this will do the trick, but oh my! i think the default icon looks okay haha…

P.S. Avoid using the css display:none at all cost, for some reason it often use up a lot of device memories in iOS.

2 Likes