fix(button): add box-sizing so anchor buttons won't exceed max-width

fixes #14760
ionic-team · Jul 12, 2018 · 9c9f081 · 9c9f081
1 parent 8e58ea4
commit 9c9f081
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -106,6 +106,7 @@
   z-index: 0;
   display: inline-block;
   overflow: hidden;
+  box-sizing: border-box;
 
   height: var(--height);
 

diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html
@@ -23,6 +23,14 @@
         <ion-button expand="block">Block</ion-button>
         <ion-button expand="full">Full</ion-button>
       </p>
+      <p>
+        <ion-button expand="block">Button Block</ion-button>
+        <ion-button expand="block" href="#">Anchor Block</ion-button>
+      </p>
+      <p>
+        <ion-button expand="full">Button Full</ion-button>
+        <ion-button expand="full" href="#">Anchor Full</ion-button>
+      </p>
       <p>
         <ion-button expand="block" color="dark" fill="outline">Block + Outline</ion-button>
         <ion-button expand="full" color="dark" fill="outline">Full + Outline</ion-button>
@@ -43,6 +51,7 @@
         <ion-button expand="block" shape="round">Block + Round</ion-button>
         <ion-button expand="full" shape="round">Full + Round</ion-button>
       </p>
+
     </ion-content>
 
   </ion-app>