Unable to click button


#1

Hello,

I have a pretty basic setup. I have the nav-view to navigate between two pages: a welcome screen and a login screen. When I get to the login screen, I’m unable to click either the login button or the help; button. My index.html file looks like this:

<body>
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
                <ion-nav-back-button class="button-icon ion-arrow-left-c">
                </ion-nav-back-button>

                <h1 class="title">My App</h1>
            </ion-nav-bar>

            <ion-nav-view animation="slide-left-right">
            </ion-nav-view>        
        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">My App</h1>
            </ion-header-bar>
            <ion-content>
                <div class="list">
                    <div class="item item-divider">
                        User
                    </div>    
                </div>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</body>

My welcome.html file looks like this:

<ion-view class="solid-background" title="My App">
  <ion-content>
    <div class="row" style="height:85%;">
      <div class="col">
        <ion-slide-box on-slide-changed="slideChanged(index)">
          <ion-slide class="box-slide">
            <div class="slide-fg">
              <h3>Slide 1</h3>
              <p>Slide content</p>        
            </div>
          </ion-slide>
    
          <ion-slide class="box-slide">
            <div class="slide-fg">
              <h3>Slide 2</h3>        
            </div>
          </ion-slide>
    
          <ion-slide class="box-slide">
            <div class="slide-fg">
              <h3>Slide 3</h3>
            </div>
          </ion-slide>
        </ion-slide-box>
      </div>
    </div>

    <div class="row" style="height:15%;">
      <div class="col">
        <button id="signupButton" class="full-width button button-balanced" ng-click="registerButton_Click()">Sign Up</a>
      </div>

      <div class="col">
        <button id="loginButton" class="full-width button button-positive" ng-click="loginButton_Click()">Login</button>
      </div>
    </div>
  </ion-content>
</ion-view>

My login.html file looks like this:

<ion-view>
	<ion-content ng-controller="LoginController">
    <div class="row">
      <div class="col">
        <div class="list list-inset">
          <label class="item item-input item-button-right">
            <i class="icon icon-user placeholder-icon"></i>
            <input id="usernameTextBox" type="text" placeholder="username" />
          </label>
          <label class="item item-input">
            <i class="icon icon-lock5 placeholder-icon"></i>
            <input id="passwordTextBox" type="password" placeholder="password" />
          </label>
        </div>
      </div>
    </div>
       
    <div class="row">
      <div class="col">
        <button id="loginButton" class="button button-positive" ng-click="loginButton_Click()">Login</button>      
      </div>

      <div class="col">
        <button id="helpButton" class="button button-balanced" ng-click="helpButton_Click()">Help</button>      
      </div>
    </div>
	<ion-content>
</ion-view>

Why can’t I click either the login or help button? The buttons work fine on welcome.html. Yet, when I get to login.html, I cannot click the buttons. In fact, if I hover over the login or help button, the cursor does not change to a finger. Oddly, there are no errors in the JavaScript console either. Wht would cause this?


#2

What version of ionic are you using? I know there were issue with beta 5, can you try to use the nightly builds?


#3

hey guys,

same here - also with nightly 1.0.0-beta.5b-nightly-2129 (2014-05-16).

I have a side menu, headerbar and ion content.

Buttons in the headerbar are working correctly, but the buttons in the ion content are not clickable.
Indeed it is a little bit strange, because on Nexus 7 (4.4) it is not working… but on a galaxy tab (4.2) everything works fine.

Hope that helps.

Greets, bengtler


#4

Hi all,

Having a problem occasionally clicking on any links - which includes sidebar and links on the main screen. It’s working fine for all other platforms but we’re finding with the Galaxy Tab the problem is intermittent.

The menu item loads fine, data loads fine it’s just we can’t always click any link on the screen. Sometimes when we close the app and reopen it’s working as intended - and then other times it does nothing.

It sometimes is possible to make the links work if we close and open the left menu a few times or just keep pressing randomly around the screen.

Galaxy Tab (android 4.1.2)
ionic 1.0.0-beta.5b-nightly-2129


#5

Strange behave:

i built in a splashscreen and forgot to hide this splashscreen.
If i manually hide it via the javascript console everything works fine - buttons are working.

if i hide my splashscreen after the app-boot the buttons do not work annnnd on iOS i get a padding-top or something like that in the headerbar.

Regards, bengtler


#6

I have the same issue in the beta 5 nightly build. Oddly, if I remove the <div class"row"> and <div class="col"> elements on the login page, the buttons are clickable.


#7

Can you throw together a codepen? It just needs to be an example, not a full working replica. I’ll load it on a phone and see what the issue is.


#8

Here you go: http://codepen.io/anon/pen/aAbEh


#9

I found out something really strange.

Sometimes on iOS 7 i have the statusbar issue (headerbar is pulled down).
If this happens the buttons does not work.

But sometimes the headerbar looks correctly and - surprise - the buttons are working!

Maybe there went something wrong with the load process of ionic?

Greets, bengtler


#10

The issue I’m experiencing isn’t isolated to iOS7. If you visit the codepen I posted in Chrome, you can see the problem in action.


#11

#12

Hello,

Thank you for your response. Can you please summarize what changed? From what I can tell, the libraries were updated to a nightly build of Ionic. Is that a fair statement?


#13

hey mhartington,

please tell what changes you did.
I updated on beta 6 and nothing changed :frowning: .

Thank you.

Happy thing:
On old android 4.0.4, 4.1.2 and 4.2 it works on iOS 6/7 and Android 4.4. it does not work

We want to have a unified base layout.
Thats why we put this structure in our index.html

I think the problem is the ion-content…

Edit:

<ion-side-menus>
        <ion-side-menu-content>
            <ion-header-bar>
            </ion-header-bar>

            <ion-content>
                <div ui-view=""></div>
            </ion-content>

            <ion-footer-bar>
            </ion-footer-bar>
        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar-light">
               
            </ion-header-bar>
            <ion-content>
           
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>

#14

Check line 103…you have <ion-content>, what you need it </ion-content> :smile:


#15

@bengtler, you shouldn’t be using ui-view inside of the content, rather this…

    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view animation="slide-left-right"></ion-nav-view>        
    </ion-side-menu-content> 

#16

Yeah but i do not need ion-nav-bar, because i handle back navigation on my own…
and how my states will be loaded only with ion-nav-view?


#17

Well the nav-bar will do more than just the back button, it will automatically update the title depending on your view.
As for using the nav-view, check out the demo on codepen.

http://codepen.io/ionic/pen/tcIGK


#18

Okay one question:

But now i have to copy my unified ion-content in each template, right?

Greets bengtler

edit and the buttons do not work :frowning:


#19

any news any idea???
@ionicNewbe do you solve the problem?


#20

Yes, the closing ‘/’ solved the issue. Feel pretty dumb right now :slight_smile: