Android: Ionic drawer icon overlaps with title


#1

I am developing an android application in (ionic framework+cordova) which there is two screens
Login screen and dashboard screen ,when user is logged in it will redirect to dashboard.

Everything works fine but the problem is dashboard title is overlapped with menu drawer icon until a refresh or a page change.

Here is the screen shot

enter image description here

Here is my dashboard.html

<ion-view title="Dashboard">

    <!--menu dashboard section-->
    <ion-content id="menu-dashboard-content">
        <!--panel section-->
        <div class="menu-panel">
            <div class="row">
                <div class="col-50 dashboard-blog" ng-click="navigateTo('app.newsFeed')">
                    <i class="icon-notebook"></i>
                   <p>Blogs</p>
                    <big>{{dashboard.blogs.total_count}}</big><br />
                    <span>{{dashboard.blogs.title}}</span><br />
                    {{dashboard.blogs.date}}
                </div>
                <div class="col-50 dashboard-calender" ng-click="navigateTo('app.calendarlist')">
                    <i class="icon-calendar"></i>
                    <p>Calender</p>
                    <big>{{dashboard.calander.total_count}}</big><br />
                    <span>{{dashboard.calander.title}}</span><br />
                    From {{dashboard.calander.from_date}} To
                    {{dashboard.calander.end_date}}
                </div>
                
            </div>
            <div class="row">
                <div class="col-50 dashboard-todo" ng-click="navigateTo('app.todolist')">
                    <i class="icon-list"></i>
                    <p>To Do</p>
                    <big>{{dashboard.todo.total_count}}</big><br />
                    <span>{{dashboard.todo.title}}</span><br />
                    {{dashboard.todo.date}}
                </div>
                <div class="col-50 dashboard-note" ng-click="navigateTo('app.noteslist')">
                    <i class="icon-note"></i>
                    <p>Note</p>
                    <big>{{dashboard.notes.total_count}}</big><br />
                    <span>{{dashboard.notes.title}}</span><br />
                    {{dashboard.notes.date}} 
                </div>
                
            </div>
            <div class="row">
                <div class="col-50 dashboard-notifications" ng-click="navigateTo('app.notificationlist')">
                    <i class="icon-bell"></i>
                    <p>Notifications</p>
                    <big>{{dashboard.notifications.total_count}}</big><br />
                    <span>{{dashboard.notifications.title}}</span><br />
                    {{dashboard.notifications.date}}
                </div>
                
                <div class="col-50 dashboard-support" ng-click="showToast('Updated soon')">
                    <i class="icon-support"></i>
                    <p>Support</p>
                    <big>{{dashboard.support.total_count}}</big><br />
                    <span>{{dashboard.support.title}}</span><br />
                    {{dashboard.support.date}}
                </div>
                
                
            </div>
        </div><!--end panel section-->
        
    </ion-content><!--Menu dashboard section-->
</ion-view>

Controller file

appControllers.controller('LoginCtrl',function($interval,$scope,$mdToast,$rootScope,$state){


$scope.doLogin=function(loginData){
   //api call
  //if success
   $state.go('app.menuDashboard');
}
}