(SOLVED) Grid in sub header giving incorrect height

ionic-v1
1

Hello all,

I have problem with grid in sub header. Th “row” give incorrect height causing my button to be pushed down and only shown half of the button. Below is my code for the Right Menu and attach screenshot of the result. Please help. Thanks in advance.

image
grid-height-error.jpg1226×747 253 KB 

<ion-side-menu side="right">
    <ion-header-bar class="bar-dark" align-title="center">
        <h1 class="title">Right Menu</h1>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-positive bar-subheader">
        <div class="row">
            <div class="col col-50">
                <div class="buttons">
                    <button class="button button-full button-clear" ng-click="doSomething()">Left Button</button>
                </div>
            </div>
            <div class="col col-50">
                <div class="buttons">
                    <button class="button button-full button-clear">Right Button</button>
                </div>
            </div>
        </div>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item menu-close ng-click="login()">
                Login
            </ion-item>
            <ion-item menu-close href="#/app/search">
                Search
            </ion-item>
            <ion-item menu-close href="#/app/browse">
                Browse
            </ion-item>
            <ion-item menu-close href="#/app/playlists">
                Playlists
            </ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>