CODEWITHSUNDEEP
htmlionic-framework
Sam5487
Sam5487

Reputation: 679

Ionic header bar button not interactive

I want to have a "Help Icon" button appear in the header bar of every nav-view in an Ionic project. To do that I included the following in my index.html page:

<ion-nav-view>
  <ion-header-bar>
    <div class="row">
        <div class="col col-10 col-offset-90">
            <div class="buttons">
                <button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
            </div>
        </div>
    </div>
  </ion-header-bar>
</ion-nav-view>

The help button I want appears in every view as expected, but is not clickable. I'm guessing it has to do something with the layering of itself within the ion-nav-view?

Things I've tried:

Note: I do have ion-header-bars in other views as well so I can show page titles. Would this affect the button at all? The button still appears but is not interactive anywhere.

Any help/comments as to why the button is not clickable is greatly appreciated.

EDIT:

So I have narrowed down my issue after more testing. The problem is with the following code in my index.html file:

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

It seems as though this nav-bar overlaps the header bar. And this code is essential because of the "Back Button" implementation. Removing this code block returns the functionality of the Help Icon Button.

Upvotes: 0

Views: 130

Answers (1)

Sam5487
Sam5487

Reputation: 679

I figured out what I was doing wrong. ion-header-bar should not be used after the ion-nav-bar. Doing so caused it to be overlapped and not be interactive. Adding the button to the ion-nav-bar itself solved this issue. The following code works perfectly and displays the button on all views:

<ion-nav-bar>
   <ion-nav-back-button>
      <i class="icon ion-ios-arrow-left"></i>
   </ion-nav-back-button>
   <ion-nav-buttons side="right">
      <a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
   </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

Upvotes: 0

Related Questions