positioning

Ionic grid system

Today lets play with Ionic grid system – it’s built with CSS Flexible Box Layout Module standard, hence it supports all the devices which ionic supports.

Topics Covered
1. Basics of row, column
2. even spacing of column
3. explicit column sizing
4. column offset
5. column positioning
6. row positioning – Going vertical
7. responsive grid

Getting started
To get started from scratch, please visit Getting Started With IONIC APP. Get your IONIC app template ready and continue with this video tutorial.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android: Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

I’ve installed ionic tabs template and am editing tab-dash.html file inside www/templates folder.

[youtube https://www.youtube.com/watch?v=IYw0n9hEqMg]

YouTube Link: https://www.youtube.com/watch?v=IYw0n9hEqMg [Watch the Video In Full Screen.]

Basics of row and column

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
    </span>

rows are specified with class row and columns with class name col

Even spacing of columns

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

In above example all columns take up 20% of space depending on the screen width of the device. i.e., 100/5 = 20. There are 5 columns.

Explicit column spacing

    <span class="row">
       <div class="col col-50">.col-50</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

Here the first column takes 50% of the width and the other 2 columns share the width equally i.e., 25% each.

Column offset

    <span class="row">
       <div class="col col-offset-25 col-25">.col-25</div>
       <div class="col col-25">.col-25</div>  
       <div class="col col-25">.col-25</div>  
    </span>

Above code leaves 25% offset at the beginning, then a column of width 25% followed by 2 more columns of 25% width.

Column positioning

    <span class="row">
       <div class="col col-top">.col-top</div>
       <div class="col col-center">.col-center</div>  
       <div class="col col-bottom">.col-bottom</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

The first column aligns itself to the top, the second one to the center and the last one to the bottom.

Row positioning – Going vertical

    <span class="row row-center">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

row-center class makes the row align itself to the center, row-top makes it align itself to the top and row-bottom makes row to align itself to the bottom.

responsive grid

    <span class="row responsive-sm">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

You can see its effect only on real devices. You must test it with real devices having different screen size.

responsive-sm for devices smaller than landscape.
responsive-md for devices smaller portrait tablet.
responsive-lg for devices smaller than landscape tablet.

UI
Using this simple ionic grid system we can make our applications User Interface to suit our applications needs.

Further ..
For further configuration, each class uses a Sass variable that can be changed to your liking. There’s also a responsive-grid-break mixin you can use to create your own grid classes.

Positioning The Title: IONIC APPS

Some components like titles, tabs behave according to the platform they are built for. For example, on iOS the default display of view title is at the center and to the left in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place some icons in the header(maybe for branding purpose) we might like to place the view title to right or to the center.

To have consistent looks across platforms we can ‘hard set’ the view title location by setting the navBar.alignTitle function of $ionicConfigProvider.

$ionicConfigProvider.navBar.alignTitle() takes 3 values
1. left
2. right
3. center

[youtube https://www.youtube.com/watch?v=Owc6x79OTK8]

YouTube Link: https://www.youtube.com/watch?v=Owc6x79OTK8 [Watch the Video In Full Screen.]

Quick fix to change position of each view:

< ion-view>
< ion-nav-title>
<center>Technotip</center>
< /ion-nav-title>
< ion-content>
< /ion-content>
< /ion-view>

As shown above, you could make use of our good old HTML friend center tag to align the nav title to center! or take some time to play with CSS to achieve the same.

Positioning The Tabs: IONIC APPS

Some components like tabs, titles behave according to the platform they are built for. For example, on iOS the default display of tabs is at the bottom and at top in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place an ad or social sharing icons at the bottom, we might like to place the tabs at the top or visa-versa!

To have consistent looks across platforms we can ‘hard set’ the tabs location by setting the tabs.position function of $ionicConfigProvider.

$ionicConfigProvider.tabs.position() takes 2 values:
1. top
2. bottom

[youtube https://www.youtube.com/watch?v=tXW7Px7A3qo]

YouTube Link: https://www.youtube.com/watch?v=tXW7Px7A3qo [Watch the Video In Full Screen.]

To center the title of header you can make use of following syntax:

< ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
< /ion-header-bar>