Button icon and text are hidden in ion-grid

Ionic Framework Ionic Angular
1

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%20AM
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;
  }
}
2

same here. The icon is hidden in the ion-row.

3

@JeongJun
I had to use button tag instead of ion-button to avoid this. I’m still confused with this problem.

4

we need to use div tag in the ion-col. https://ionicframework.com/docs/layout/css-utilities

1 Like
5

try this example i hope its worked for you

ion-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 50% 0 50% 0;
    --color: black !important;
    --border-radius: 0;
    border-color: blue;
    --background: transparent;
    --box-shadow: none;
}

in html you need to remove color attribute in your button like this

 <ion-button expand="block" text-wrap class="menu-button" no-margin >
          <ion-icon name="flash"></ion-icon>
          FUNCTIONS 2
        </ion-button>
1 Like
6

@saad-ansari
Thanks for your help. I’ll check it out