Clever Geek Handbook

Ionic 2: how to overwrite the style of an ionic component

I'm new to Ionic 2, I would like to ask how to change the style of an Ionic component?

I faced the problem as below:

<form action="">
    <ion-list>
        <ion-item>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>

        <ion-item>
            <ion-label fixed>Password</ion-label>
            <ion-input type="password" clearInput></ion-input>
        </ion-item>
    </ion-list>
</form>

The layout will display as: enter image description here

There are 3 gray lines between these elements, long because of the ionic list and short because of the ionic element.

I tried to overwrite the style in the /variables.scss theme, but it seems there is no setting for it.

I saw deep in Chrome and found the html looks like this enter image description here

I don't think rewriting the ".list-ios.item-block.item-inner" style is a good idea, is there another way to solve this?

Thank.

+3


source to share


3 answers


You just need to give to no-lines

this item <ion-list>

. Doc about it .

Like this: Work Plunker

<ion-list no-lines>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

If you need to know how to change them by default to Ionic2, I highly recommend reading this article. Ionic 2 Styling Guide Applications



You don't need to use !import

hack if you are using styles like below inside the page component. Use .ios,.md

like this:

login.scss

 .ios,
    .md {
        page-login {
            .margin-top-35 {
                margin-top: 35px;
            }
         }
 }
+3


source


To delete lines, there is an attribute for ion-item

: no-lines 

<ion-item no-lines>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>


There are also utility attributes that you can use.

+2


source


Add right after your CSS property !important

.

eg:

    .ion-nav-button-right {
         margin-top: -7px !important;
         margin-right: 0 !important;
    }

For your problem, just remove the shortcut like:

<ion-item style="background: #f3f3f3 !important">
          <ion-input  type="text" placeholder="Write Your Comments"></ion-input>
        </ion-item>
-1


source






More articles:


All Articles