Ios ion-menu/ion-title img css

@spacecadet wrote:

Please help. Trying to expand image width to 100% of menu width in ios. Android works correctly (image expands to 100%) and height adjust automatically. Please see pics and code.

Simulator Screen Shot - iPhone XS Max - 2019-03-16 at 18.27.00.jpg1242×2688 295 KB

app.html

<ion-menu [content]="mainContent" type="overlay" persistent="true">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          <div class="logo-image">
            <img alt="logo" src="assets/icon/NAMI StTammany LOGO_White w gold.png">
            </div>
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="menu-gradient">

      <button id="menu-button" ion-button large block menuClose on-click="goToResources()" icon start><ion-icon name="search"></ion-icon>
         <ion-label>Resources</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToAccount()" icon start><ion-icon name="custom-star-outline" src="assets/star-outline.svg"></ion-icon>
         <ion-label>Favorites</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToReferenceDocuments()" icon start><ion-icon name="document"></ion-icon>
         <ion-label>Documents</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToAbout()" icon start><ion-icon name="information-circle"></ion-icon>
         <ion-label>About NAMI</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToDonate()" icon start><ion-icon name="card"></ion-icon>
         <ion-label>Donate</ion-label>
      </button>
      <!-- <img src="assets/icon/IconNAMI_1024x1024.png" style="display:flex;width:auto;height:auto;margin-left:auto;margin-right:auto;"> -->
    </ion-content>

    <!-- <img src="assets/icon/IconNAMI_1024x1024.png" style="display:flex;width:auto;height:auto;margin-left:auto;margin-right:auto;"> -->
  </ion-menu>
  <!-- <ion-nav [root]="rootPage" #mainContent></ion-nav> -->

<ion-content padding><ion-nav #mainContent [root]="rootPage"></ion-nav></ion-content>

app.scss

.logo-image{
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
    
  }
  
  .toolbar-background {
    background: #0c499c !important;
   
  }

  .toolbar-title-md {
    padding: 0 12px;
    font-size: 2rem;
    font-weight: 500;
    color: white !important; 
}

.toolbar-title-ios {
  padding: 0 12px;
  font-size: 2rem;
  font-weight: 500;
  color: white !important; 
}

.toolbar-title-ios .img {
  width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
}



  .bar-button-default-md, .bar-button-clear-md-default, .bar-button-md-default {
    color: white;
    background-color: transparent;
}

.bar-button-default-ios, .bar-button-clear-ios-default, .bar-button-ios-default {
  color: white;
  background-color: transparent;
}

.menu-gradient {
  background: -moz-linear-gradient(top, rgba(12,73,156,1) 0%, rgba(0,0,70,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(12,73,156,1) 0%,rgba(0,0,70,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(12,73,156,1) 0%,rgba(0,0,70,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c499c', endColorstr='#000046',GradientType=0 ); /* IE6-9 */
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  // position: absolute;
  // z-index: 1;
  // display: block;
  // overflow-x: hidden;
  // overflow-y: scroll;
  // -webkit-overflow-scrolling: touch;
  // will-change: scroll-position;
  // contain: size style layout;
}

#menu-button{
  flex: auto;
  margin-right: auto !important;
  margin-left: auto !important;
  align-items: center;
  width: 90%;
  border-radius: 5px;

color: #0c499c;
background: -moz-radial-gradient(center, ellipse cover, rgba(253,251,251,1) 0%, rgba(235,237,238,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(253,251,251,1) 0%,rgba(235,237,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(253,251,251,1) 0%,rgba(235,237,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfbfb', endColorstr='#ebedee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 // contain: layout;
}


ion-searchbar {
  padding: 8px 0px 8px 0px !important;
 }
    
  .bshadow {
    flex-shrink: 1;
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }

Have been banging on my head for days on this one…

Posts: 1

Participants: 1

Read full topic