(SOLVED) Grid in sub header giving incorrect height


#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.

<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>