View Title and Menu Button overlap + View Content disappears randomly :: Ionic

1
votes

I really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.

I cannot click on the icon once this happens.

Screens:

img1

img2

in my menu.html, I believe this is the relevant part

<ion-side-menu-content drag-content="false">
        <ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
            <!-- Hamburger Menu Button -->
            <ion-nav-buttons side="left">
                <button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
                    <span>toggle menu</span>
                </button>
            </ion-nav-buttons>
<!-- Settings -->
            <ion-nav-buttons side="secondary">
                <img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="mainView">
        </ion-nav-view>
    </ion-side-menu-content>

I then define the view name in separate template files like so

<ion-view view-title="CMON NOW">

Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.

Thanks

The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.

3
htmlangularjsangularjs-directiveionic-frameworkionic
you need to take title in center? - Paresh Gami
Yes, title should be centered at all times + I should see the content instead of the white space. - lmenus

3 Answers

4
votes

I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with 

$ionicConfigProvider.navBar.alignTitle('center');

Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

The default value should be centered anyway.

After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.

So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.

This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.

EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.

https://github.com/driftyco/ionic/issues/2881

From the discussion I made a solution which ultimately solved the issue.

$scope.$on('$ionicView.afterEnter', function (event, viewData) {
  $timeout(function() {
    $ionicNavBarDelegate.align('center');
  }, 100);
});

Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.

SECOND EDIT:

If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:

.title {
  transition-duration: 0ms !important;
  transform: translate3d(0px, 0px, 0px) !important;
  text-align: center !important;
}

This ultimately solved the problem for me.

1
votes

Ionic link for doc

http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

You can set it using application config

appname.config(function($ionicConfigProvider) 
{
      $ionicConfigProvider.navBar.alignTitle('center');
});
0
votes

You can use z-index property, for you button.

.button {
   position: relative;
   z-index: 9999;
}