Ionic Menu remove highlight line

Question

Community, I was coding a side menu at the slot end and when I open the menu for the first time by using an image and menu controller to open it appears a highlight line on all the screen borders. Does anyone know how to get rid of it?

The HTML code for the page I have right now:

  <ion-menu side="end" menuId="end" contentId="main2" class="ion-no-border">
  <ion-header>
    <ion-toolbar>
      <ion-segment value="powerups" (ionChange)="segmentChanged($event)">
        <ion-segment-button value="powerups">
          <ion-icon src="/assets/svg/fire.svg"></ion-icon>
          <ion-label>{{ "powerups" | translate }}</ion-label>
        </ion-segment-button>
        <ion-segment-button value="upgrades">
          <ion-icon src="/assets/svg/rocket.svg"></ion-icon>
          <ion-label>{{ "upgrades" | translate }}</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list *ngIf="selectedSegment == 'powerups'">
      <ion-item *ngIf="autoClick == 0" style="opacity: 0.3;" (click)="buyAutoClick()">
        <img src="/assets/svg/pointing-hand.svg" height="40" width="40" />
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-label>{{ "autoclick" | translate }}</ion-label>
            </ion-col>
            <ion-col size="6">{{ "level" | translate }} {{ autoClick + 1 }}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6">{{ autoClickPrice | number : '1.0-0' }}</ion-col>
            <ion-col size="6">{{ "cps" | translate }} 0.1</ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <ion-item *ngIf="autoClick != 0" (click)="buyAutoClick()">
        <img src="/assets/svg/pointing-hand.svg" height="40" width="40" />
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-label>{{ "autoclick" | translate }}</ion-label>
            </ion-col>
            <ion-col size="6">{{ "level" | translate }} {{ autoClick + 1 }}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6">{{ autoClickPrice | number : '1.0-0' }}</ion-col>
            <ion-col size="6">{{ "cps" | translate }} 0.1</ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
    <ion-list *ngIf="selectedSegment == 'upgrades'">
      <ion-item>
        <ion-label>Label</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
  <ion-router-outlet id="main2"></ion-router-outlet>
</ion-menu>
<ion-content>
</ion-content>
<ion-footer class="ion-padding ion-no-border" collapse="fade">
  <ion-grid style="padding-bottom: 15%;">
    <ion-row>
      <ion-col size="6">
        <img #settings src="/assets/svg/settings.svg" style="width : 60px ; height : 
        60px;" (click)="openSettings()">
      </ion-col>
      <ion-col size="6" class="ion-text-right">
        <img #shop src="/assets/svg/sushi-shop.svg" style="width : 60px ; height : 
        60px;" (click)="openShop()">
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

The typescript methods called and used in order to open the end menu:

  openShop() {
    this.menuController.open('end');
  }

UPDATE: The problem was by using an image with a click event and you use it to open a menu it does this border.

<ion-col size="6">
   <img #settings src="/assets/svg/settings.svg" style="width:60px;height:60px;" (click)="openSettings()">
</ion-col>
<ion-col size="6" class="ion-text-right">
   <img #shop src="/assets/svg/sushi-shop.svg" style="width:60px;height:60px;" (click)="openShop()">
</ion-col>

My possible work around (probably not the best in anyway but for me works):

<ion-col size="6">
   <button style="background-color: transparent;" (click)="openSettings()">
      <img src="/assets/svg/settings.svg" style="height: 60px; width:60px;">
   </button>
  </ion-col>
  <ion-col size="6" class="ion-text-right">
   <button style="background-color: transparent;" (click)="openShop()">
      <img src="/assets/svg/sushi-shop.svg" style="height: 60px; width:60px;">
   </button>
</ion-col>

remove `value="powerups"` from `ion-segment` element. by default it is assigning `powerups` to segment which is highlighting first segment. — Najam Us Saqib, Jun 21 '22 at 09:56
I have done that and It's not working. The segments were implemented before this error happened. But thanks @NajamUsSaqib — Àlex, Jun 21 '22 at 11:16

score 0 · Answer 1 · answered Jun 20 '22 at 13:52

0

This is a CSS issue, you should inspect the your ion-menu item or the body HTML element and check if there is any border attribute.

Or just post your CSS here please

answered Jun 20 '22 at 13:52

Q.Rey

305
4
18

Here you have the css but there isn't any applied to ion menu https://www.toptal.com/developers/hastebin/emugewemeq.css – Àlex Jun 20 '22 at 17:59

score 0 · Answer 2 · answered Dec 01 '22 at 16:41

0

I had similar issue, still do not know the reason of the boarder appearing around the menu component but adding following style to the 'global.scss' file helped me to get rid of the menu border.

ion-menu {
  outline-style: none !important;
}

answered Dec 01 '22 at 16:41

Tomas

144
5

Ionic Menu remove highlight line

2 Answers2