Ionic Grid - Two buttons with different content but with the same size, side by side

Ionic Framework ionic-v3
1

I have an element which is a header with two buttons. I have the buttons organized in a ion-grid, where the two buttons are side by side with the same size and centered in the column. This way the size is perfect for mobiles, but the buttons are too big when using a browser:

<ion-header>
	<ion-toolbar>		
		<ion-grid>
			<ion-row>
				<ion-col size="6" class="ion-text-center">
					<ion-button style="width: 75%;">Menu</ion-button>
				</ion-col>
				<ion-col size="6" class="ion-text-center">
					<ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
				</ion-col>
			</ion-row>
		</ion-grid>
	</ion-toolbar>
	<style>html, body { margin: 0; }</style>
</ion-header>

I tried to change the min-width and max-width, but when it gets perfect for browser screen size it gets too small for mobile and the button became smaller then the text inside.

As suggested here, I tried to apply expand="full", class="ion-text-wrap" and set a max-width to the button, but it loses its center property defined by class="ion-text-center" on ion-col. I then added style="text-align: center" to maintain the center property in ion-col tag, but does not make difference`.

Stackblitz

2 
<ion-header>
	<ion-toolbar>		
		<ion-grid>
			<ion-row>
				<ion-col  class="ion-text-center">
					<ion-button expand="full" class="ion-text-wrap" >Menu</ion-button>
				</ion-col>
				<ion-col  class="ion-text-center">
					<ion-button expand="full" class="ion-text-wrap">Abcdefghijklmn</ion-button>
				</ion-col>
			</ion-row>
		</ion-grid>
	</ion-toolbar>
	<style>html, body { margin: 0; }</style>
</ion-header>
3

Thank you for your reply, but as mentioned I already tried this. If you enlarge the screen to fit the monitor the buttons become too large. If I try to set the max-width in your answer I got the initial placement problem.

4

sorry didn’t understand the question initially

<ion-header>
	<ion-toolbar>		
		<ion-grid style="max-width : 75%; text-align: center">
			<ion-row >
				<ion-col  class="ion-text-center">
					<ion-button expand="full" class="ion-text-wrap"style="max-width: 75%;">Menu</ion-button>
				</ion-col>
				<ion-col  class="ion-text-center">
					<ion-button expand="full" class="ion-text-wrap" style="max-width: 75%;">Abcdefghijklmn</ion-button>
				</ion-col>
			</ion-row>
		</ion-grid>
	</ion-toolbar>
	<style>html, body { margin: 0; }</style>
</ion-header>

Screen Shot 2020-01-13 at 3.16.39 PM
Screen Shot 2020-01-13 at 3.16.39 PM1898×452 44 KB

5

I believe it is my fault for not asking more clearly. This last method of yours is really an advance, the only problem is that the larger text ends up being cut off when the screen shrinks, which I find odd as the button class is set to ion-text-wrap.

6
7

I tried some of the things Brandy mentioned, and I believe that the situation of keeping both buttons at the same size, regardless of screen size, has been resolved, but I still have the problem of button placement, in particular the right button. If you notice the right button seems to be being “pulled” to the center and when the screen is mobile size the buttons are on top of each other.

Updated Stackblitz

8

Question answered here

Ref : https://ionicframework.com/docs/layout/grid#grid-size

<ion-grid>
    <ion-row>
        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
        </ion-col>

        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
        </ion-col>
    </ion-row>
</ion-grid>

<style>
    .min-max-width {
        max-width: 200px;
        margin: 0 auto;
    }
</style>