Set the max size of ionic grid


#1

Hi I was just wondering if there was an easy way to set the max size of an ionic grid.

Essentially I’m using the grid to create a sign in / sign up page. Everything works great except for the fact that when I try and optimize the layout for a tablet the buttons and input fields stretch all the way to the end of the screen.

I have fixed it with some less then ideal CSS but it seems like If I were just able to set a max grid size I could clean my code up quite a bit.

Thanks in advance!


#2

Hey all this is actually pretty easy when you think about it. I accomplished it by using the below code.

#sign-in-container {
    margin-left:auto;
    margin-right:auto;
    max-width:700px;   //your max size here
}

<div id="sign-in-container">
  <ion-grid >
  </ion-grid>
</div>

Just simply wrap your grid with a div that defines a max-width property of the size you want, and apply margin auto on the left and right to center your content.

Hope this has helped someone!