web-dev-qa-db-fra.com

Comment supprimer la ligne de fond des composants ionic 2

![enter image description here

J'utilise ionic 2. J'ai besoin de supprimer la ligne blanche du bas du champ de saisie. Ceci est ma page addVehicle.html,

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

J'ai utilisé

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

Et voici mon .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;
 }

pour supprimer cette ligne blanche que l'image vous montre. Mais je ne peux pas la supprimer. Y a-t-il une suggestion pour surmonter ce problème les gars

cssionic-frameworkionic2ionic3
10
Dms Malith Disanayake

Il semble qu'il n'y ait aucun moyen de supprimer cela en utilisant Ionic propriétés Sass. Cela étant dit, nous pouvons le supprimer en utilisant simplement quelques règles de style CSS:

.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; 
}
10
sebaferreras

Incluez simplement no-lines dans ion-item. Comme ci-dessous

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

16
Shahab Rauf

Vous pouvez maintenant simplement ajouter lines = "none".

Exemple:

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

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

3
Switch900

incluez simplement votre <ion-item></ion-item> éléments dans un <ion-list inset></ion-list>. Assurez-vous d'inclure la propriété inset à votre liste d'ions.

1
Ravi Rajindu

Sur ionique cette solution fonctionne bien

 .item-inner {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }
0
Péttrin Miranda