CODEWITHSUNDEEP
cssionic-frameworkionic2ionic3
Aditya
Aditya

Reputation: 2536

Unable to add a border-bottom in ion-item

I want the border of ion-item to touch till the ends.When I write the css class for it, the browser does not apply the styles.

enter image description here .html

<ion-item class="item-class">
<input type="text" placeholder="Username">
<ion-icon item-end name="people"></ion-icon>
</ion-item>

.css

.item-class {

border-bottom: 1px solid #F1F1F1;

}

You can see the screen-shot below

enter image description here

After adding !important to the border-bottom property in css the result are visible as follows:

enter image description here

When clicking in the input field the bule line is also visible.

enter image description here

Upvotes: 0

Views: 3250

Answers (1)

Mohan Gopi
Mohan Gopi

Reputation: 7724

In side your variable.scss file add this in the android section.

$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;

Inorder to avoid the item line use this

<ion-item class="item-class" no-line> (or)

inside your respected scss file

.item-inner {
    padding-right: 8px;
    border-bottom: 1px solid #F1F1F1;
}

Upvotes: 1

Related Questions