CODEWITHSUNDEEP
htmlcssionic-frameworksassionic2
Jennica
Jennica

Reputation: 327

How to get rid of side menu button borders

So I have a ionic mobile application and I'm currently improving the user interface design of the side menu.

enter image description here

So the problem here is that I having a hard time removing the border of each button.

Here's my code: 

   <ion-content>
<ion-list no-border>
  <button menuClose ion-item class="profileContainer color" text-center (click)="openProfile()">
    <img src="{{profileImage}}" style="height: 20%; width: 30%;">
    <h1>{{profileName}}</h1><p>{{profileEmail}}</p>
  </button>
  <button class="otin" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    {{p.title}}
  </button>
  <button class="otin" menuClose ion-item (click)="logoutUser(event)">
    Logout
  </button>
</ion-list>

SASS

  .profileContainer{
// padding-bottom: 1rem;
// margin: 0 auto;
padding-left: 0;
}
  .otin{
 background-color: map-get($colors, headerbackground);
 }

How do I get rid of the white border above and below the buttons? I tried border-style:none, but I'm still facing the same issues.

Upvotes: 2

Views: 359

Answers (1)

Bishwajit Halder
Bishwajit Halder

Reputation: 66

Add below code on your SASS file, hope it will remove the border bottom.

  .otin.item-block .item-inner, .item-md.item-block .item-inner {
    border: 0 !important;
}

Let me know if it works for you.

Upvotes: 1

Related Questions