Button icon and text are hidden in ion-grid

@quangcanh2975 wrote:

I use ion-grid to make a grid menu like image below. I want the button’s width and height are equal so I set button’s height is 0 and the padding is: padding: 50% 0 50% 0

27%20AM1142×1818 71.6 KB

The problem is I don’t know why the button’s icon and text are hidden despite of setting overflow: visible.
Please point out if I have something wrong. Thank you very much!
I’m using ionic/angular version 4.

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash" style="display: inline-block"></ion-icon>
          FUNCTIONS 1
        </ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 2
        </ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 3
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 4
        </ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 5
        </ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 6
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="4">
        <ion-button expand="block" text-wrap class="menu-button" no-margin color="dark">
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 7
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

And this is my scss file:

.menu-button {
}

* {
  color: black;
  border: 2px solid;
}

ion-grid {
  --overflow: visible !important;
  height: fit-content;
  border-color: red;
}
ion-row {
  --overflow: visible !important;
  height: fit-content;
  border-color: green;
}
ion-col {
  --overflow: visible !important;
  border-color: yellow;
}

ion-button {
  display: block;
  width: 100%;
  height: 0;
  padding: 50% 0 50% 0;
  --color: black !important;
  // box-sizing: border-box;
  // --overflow: visible;
  --border-radius: 0;
  border-color: blue;
}

ion-icon {
  --overflow: visible;
  font-size: 64px;
}

:host {
  ion-button {
    --overflow: visible;
  }
}

Posts: 1

Participants: 1

Read full topic