How to remove bottom line from the ionic 2 components

Question

![enter image description here

I'm using ionic 2. I need to remove the bottom white line from the input field. This is my addVehicle.html page,

<form [formGroup]="addCustomerForm" (ngSubmit)="onSubmit(addCustomerForm)">
<ion-item class="ion-card">
  <ion-input type="text" placeholder="Owner Name" class="ion_input" formControlName="vehicle_cust_name" name="vehicle_cust_name"></ion-input>
  <ion-icon name="person-add" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Vehical No" formControlName="vehicle_no" name="vehicle_no"></ion-input>
  <ion-icon name="car" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Tel No 1" formControlName="vehicle_cust_tel1" name="vehicle_cust_tel1"></ion-input>
  <ion-icon name="call" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Tel No 2" formControlName="vehicle_cust_tel2" name="vehicle_cust_tel2"></ion-input>
  <ion-icon name="call" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Address" formControlName="vehicle_cust_address" name="vehicle_cust_address"></ion-input>
  <ion-icon name="navigate" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Engine No" formControlName="vehicle_engine_no" name="vehicle_engine_no"></ion-input>
  <ion-icon name="construct" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Chassis No" formControlName="vehicle_chassis_no" name="vehicle_chassis_no"></ion-input>
  <ion-icon name="build" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-select class="ion_input" placeholder="Brand ID" formControlName="vehicle_vehicle_brand_id" [(ngModel)]="vehicle_vehicle_brand_id"
    multiple="false">
    <ion-option *ngFor="let brandId of brandIds.brand" [value]="brandId.brand_id">{{brandId.brand_name}}</ion-option>
  </ion-select>
  <ion-icon name="code" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-select class="ion_input" placeholder="Type" formControlName="vehicle_vehicle_models_id" [(ngModel)]="vehicle_vehicle_models_id"
    multiple="false" (ionChange)="modelChanged(vehicle_vehicle_models_id)">
    <ion-option *ngFor="let loadModel of loadModels.types" [value]="loadModel.models_id">{{loadModel.models_name}}</ion-option>
  </ion-select>
  <ion-icon name="code-working" class="ion_icon" item-left small></ion-icon>
</ion-item>
<button ion-button color="primary_btn" type="submit" [disabled]="!addCustomerForm.valid" block>
    Add Vehicle
    </button>
<button ion-button color="secondary_btn" type="button" (click)="cancleClick()" block>
    Cancel
    </button>

I used

$text-input-md-highlight-color:false;

And this is my .css

.ion-card{
background-color: #101218;
border: 1px solid #4A4A4A;
margin:20px auto;
border-radius: 10px !important;
}
.ion_input{
color:#f4f4f4;
opacity: 0.6;
}
.ion_icon{
color:#f4f4f4;
opacity: 0.6;
font-size: 5px;
}
.home_back{
 background-color: #15161D;
}
.item-inner, ion-item {
 border-bottom-color: transparent !important;
 box-shadow: none !important;
 }

for remove that white line which the image shows you.But I can't remove it.Is there a suggestion to overcome this issue guys

Is https://stackoverflow.com/questions/41376147/remove-ion-item-divider what you are asking? — Suraj Rao, Jul 19 '17 at 06:46
when I'm using "no-lines" the border will also disappear.Is there any solution for it? — Dms Malith Disanayake, Jul 19 '17 at 06:49

score 20 · Answer 1 · answered Feb 10 '18 at 17:27

20

Just include no-lines in ion-item. Just like below

<ion-item no-lines></ion-item>

answered Feb 10 '18 at 17:27

Shahab Rauf

3,651
29
38

2

The best solution for me. Thanks – Danny Mar 05 '18 at 17:08

score 11 · Answer 2 · answered Jul 30 '19 at 20:36

11

You can now just add lines="none".

Example:

<ion-item class="ion-card" lines="none">

From: https://ionicframework.com/docs/api/item

answered Jul 30 '19 at 20:36

Switch900

161
2
5

sebaferreras · Accepted Answer · 2017-07-19T07:32:10.930

10

Seems like there isn't a way to remove that by using Ionic Sass properties. That being said, we can remove it by just using some css style rules:

.item-md.item-block .item-inner,
.item-md.item-input.input-has-focus .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner,
.list-md .item-input.input-has-focus:last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
    border-bottom: none;
    box-shadow: none;
}
.list-md .item-input.input-has-focus:last-child .item-inner,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child .item-inner {
    box-shadow: none; 
}

edited Jul 19 '17 at 07:32

answered Jul 19 '17 at 06:55

sebaferreras

44,206
11
116
134

2

.item-inner { border-bottom-color: transparent !important; box-shadow: none !important; } //using this,it removed both white line and the bottom border.I only need to remove the white line.not the border!Do you have a suggestion! – Dms Malith Disanayake Jul 19 '17 at 07:11
Hmm, could you please add to the question, the custom css that's being applied to each item? – sebaferreras Jul 19 '17 at 07:12
Added it.Please check – Dms Malith Disanayake Jul 19 '17 at 07:18
I've updated the answer, please take a look at it when you have time :) This is the result: [Gyazo gif](https://i.gyazo.com/1e46a479932f8734c8a89cee711e5f8c.gif) – sebaferreras Jul 19 '17 at 07:32
Glad to hear that @Vasanth :) – sebaferreras Aug 24 '17 at 17:33
Can anyone tell me how to do the same for ios. This works only in android – Tapas Mukherjee Sep 10 '17 at 18:11
@TapasMukherjee have you already tried by replacing the `.item-md` of each style by `.item-ios`? – sebaferreras Sep 10 '17 at 20:19
1

It's working. Thanks. Is there a way it can be declared it in the scss variable file so that it reflects in every page. – Tapas Mukherjee Sep 11 '17 at 02:06
Yes, if you declare those style rules in the `app.scss` file, they should be applied to every page – sebaferreras Sep 11 '17 at 04:07
4

@sebaferreras, if we give "no-lines"property to ion-item, it will also remove that line. Right? – Arj 1411 Sep 26 '17 at 12:42
You need to add !important to the properties. – pasx Jun 12 '18 at 21:24
@pasx that shouldn't be necessary since the rules are very specific. Could you please add some more information about why is the `!important` needed? (Feel free to edit the question if you want) – sebaferreras Jun 13 '18 at 05:11
@sebaferreras I added the rules to my page scss first, then app.scss and in the list of rules, mines appear below the original rules so I needed to make them important for them to be applied. – pasx Jun 13 '18 at 12:07

score 1 · Answer 4 · answered Dec 10 '17 at 02:29

1

just include your <ion-item></ion-item> elements within a <ion-list inset></ion-list>. Make sure you include inset property to your ion-list.

answered Dec 10 '17 at 02:29

Ravi Rajindu

380
2
6
23

score 0 · Answer 5 · answered Apr 02 '19 at 21:56

0

On ionic 3 this solution is working fine

 .item-inner {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

answered Apr 02 '19 at 21:56

Péttrin Miranda

279
3
13

score 0 · Answer 6 · answered Sep 16 '20 at 07:36

0

Adding a class in ion-input and applying "text-decoration: none" style in that class worked for me

answered Sep 16 '20 at 07:36

Bhavesh Lalwani

309
3
6

score -1 · Answer 7 · answered Jul 19 '17 at 07:38

You can just target the class ion_input with a wrapped .md,.ios,.wp like so

.md,.ios,.wp{
     .ion_input{
         border-bottom: none;
         box-shadow: none;
     }
}

Wrapping with those target classes overwrites any ionic base styles.

How to remove bottom line from the ionic 2 components

7 Answers7