Geek Answers Handbook

How to remove the bottom line from ionic components 2

! [enter image description here

I am using ionic 2. I need to remove the bottom white line from the input box. 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;
 }

to remove this white line that the image shows you. But I can’t remove it. Is there a suggestion to overcome this problem. Guys

+10
source share
5 answers

There seems to be no way to remove this using the properties of Ionic Sass. In doing so, we can remove it simply 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; 
}
+9
source

Just turn no-lineson ion-item. As below

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

+11

<ion-item></ion-item> <ion-list inset></ion-list>. , inset .

+1
source

On ionic 3, this solution works fine

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

You can just point the class ion_inputto the wrapped .md,.ios,.wplike this:

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

A wrapper with these target classes overwrites any ionic base styles.

-1
source

More articles:


All Articles