Side menu overlap when used with cordova-plugin-googlemaps

@lolaswift1 wrote:

Dear expert,
I have an app which uses side menu, side menu works perfectly on all other pages except for one page which uses google maps. The side menu overlaps the maps.

I set sidemenu element to hidden and then I inspected the element using chrome//inspect and I got this:

      <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
    <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="bar-myApp-assertive bar bar-header" align-title="left"><button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item"><i class="icon ion-android-arrow-back"></i>
      <span class="back-text"></span></button><div class="buttons buttons-left header-item"><span class="left-buttons">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </span></div><div class="title title-left header-item"></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="bar-myApp-assertive bar bar-header" align-title="left"><button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item"><i class="icon ion-android-arrow-back"></i>
      <span class="back-text"></span></button><div class="buttons buttons-left header-item"><span class="left-buttons">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </span></div><div class="title title-left header-item" style="left: 50px; right: 66px;"><span class="nav-bar-title ng-binding">Map</span></div><div class="buttons buttons-right"><span class="right-buttons">
    <button class="button button-icon" ng-disabled="items.length === 0" ng-click="openItemsModal()">
      <i class="icon ion-ios-list-outline"></i>
    </button>
    </span></div></ion-header-bar></div></ion-nav-bar>
    <ion-nav-view name="menuContent" class="view-container _gmaps_cdv_" nav-view-transition="android" nav-view-direction="none" nav-swipe="" style="background-color: rgba(0, 0, 0, 0);"><ion-view class="items-view pane _gmaps_cdv_" state="app.xxx" nav-view="active" style="transform: translate3d(0%, 0px, 0px); opacity: 1; background-color: rgba(0, 0, 0, 0);">
  <ion-nav-title class="hide"></ion-nav-title>
  <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
  <ion-content class="scroll-content ionic-scroll _gmaps_cdv_ overflow-scroll  has-header has-footer" style="background-color: rgba(0, 0, 0, 0);"><div class="scroll _gmaps_cdv_" style="background-color: rgba(0, 0, 0, 0);">
    <div id="map_canvas" class="_gmaps_cdv_" style="background-color: rgba(0, 0, 0, 0);"></div>
  </div></ion-content>
  <ion-footer-bar ng-class="{'bar-myApp-assertive': theme }" class="bar bar-footer bar-myApp-assertive" style="">
    <div class="buttons buttons-center">
      <button class="button button-myApp-assertive" ng-click="onSearchItems()">
        Search in this area
      </button>
    </div>
  </ion-footer-bar>
</ion-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu id="side-menu" side="left" expose-aside-when="large" is-enabled="true" width="275" class="menu menu-left" style="visibility: hidden; width: 275px; z-index: 0;">
    <ion-content class="menu-myApp-assertive"><div class="scroll">
      <img class="img-profile" width="96" height="96" actual-src="main/assets/images/avatar.png" ng-src="main/assets/images/avatar.png" src="main/assets/images/avatar.png">
      <h5 class="title-profile ng-binding" ng-class="{ hidden:!user }">

      </h5>
      <ion-list class="disable-user-behavior"><div class="list">
        <ion-item menu-close="" nav-clear="" ng-click="onNavigateToSearch()" class="item ng-binding">
          <i class="icon ion-search"></i> Search
        </ion-item>
        <!-- ngIf: user --><ion-item menu-close="" nav-clear="" ng-click="onNavigateToProfile()" ng-if="user" class="item ng-binding">
          <i class="icon ion-person"></i> Profile
        </ion-item><!-- end ngIf: user -->
        <ion-item menu-close="" nav-clear="" ng-click="onOpenSettings()" class="item ng-binding">
          <i class="icon ion-gear-a"></i> Settings
        </ion-item>
        <!-- ngIf: !user -->
        <!-- ngIf: user --><ion-item menu-close="" nav-clear="" ng-click="onLogout()" ng-if="user" class="item ng-binding">
          <i class="icon ion-log-out"></i> Log Out
        </ion-item><!-- end ngIf: user -->
      </div></ion-list>
    </div></ion-content>
  </ion-side-menu>
</ion-side-menus>

However, I don't want to hide the sidemenu. Any idea how to make it work with google maps?
Can you please help me?

Thank you,

Regards,
lola

Posts: 1

Participants: 1

Read full topic