angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.54k stars 3.39k forks source link

WP - Button not clickable #8220

Closed graphefruit closed 8 years ago

graphefruit commented 8 years ago

Hello Team,

I'm referencing to this issue: https://github.com/angular/material/issues/7618 A new problem came up after this fix.

If I'm clicking on the text, the button click isn't executed. If I click on a blank space the button click gets triggered.

I've made a small .GIF to this issue. not_clickable

My structure looks like on the angular.material page

<md-list>
    <md-list-item ng-click="goto('/')">
        <md-icon md-svg-icon="action:home"></md-icon>
        <p>Home</p>
    </md-list-item>
</md-list>

If I'm wrapping my own button in the list-item its working.

<md-list>
    <md-list-item>
        <md-button layout="row"  ng-click="goto('/')">
            <md-icon md-svg-icon="action:home"></md-icon>
            <p>Home</p>
        </md-button>
    </md-list-item>
</md-list>

Here another small .GIF. clickable

I changed z-index aswell as position:absolute to the button without effect.

It looks like the generated wrapper influences something on WP?

<div class="_md-list-item-inner">
    <md-icon md-svg-icon="action:home" aria-hidden="true"></md-icon>
    <p>Home</p>
</div>

@DevVersion May you could take a look again?

This issue is just visibile in a real cordova app. I tried the demo page with the emulator and didn't encounter this problem.

On Android aswell on iOS there is no problem.

AngularJS Version 1.5.5 Angular Material: RC 4

Thanks in advance Graphefruit

devversion commented 8 years ago

@graphefruit Thanks for the issue.

I'm currently not able to see the issue. Can you please explain more detailed, what's the current behavior and what's the expected.

graphefruit commented 8 years ago

@DevVersion The current behavior is: If my fingers "tap" on the text "Home" the "ng-click" isn't triggered. If I click on a blank-space (without any text) the ng-click is triggered and executed.

The expected behavior would be: I tap the text "Home" and the ng-click gets triggered and executed.

devversion commented 8 years ago

@graphefruit Thanks for the quick response, uff it's hard to track the bug, if I'm not having a Windows Phone + A working Cordova App.

That's why we need to work together, to solve the bug ;)

graphefruit commented 8 years ago

@DevVersion Sure, no problem.

A normal "alert('test')"?

I gonna get you a working example in about 15 minutes. Greetings

devversion commented 8 years ago

@graphefruit Awesome, thanks!

Yes, just to confirm, that the ng-click works.

graphefruit commented 8 years ago

@DevVersion Sorry, not working. click_sample_2

If you wish to we could do a Skype/Hangout-Call to see this issue live. Greetings

devversion commented 8 years ago

@graphefruit Yea, A hangout would be great.

graphefruit commented 8 years ago

Problem fixed.

Thanks to @DevVersion for your time and your great effort. The problem was the referenced ngTouch plugin which I included a way earlier.

After the list got a new layout structure the ngTouch influced now the new structure. This affected just Windows Phone. iOS and Android weren't affected.

For integrity: Hammer.js, jGestures and FastClick.js had no impact.

Thanks Graphefruit