Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: rc0 Header icons/buttons on left of header bar can't get "activated" class due to swipe to go back change #3348

Closed
djett41 opened this issue Mar 18, 2015 · 13 comments
Closed

bug: rc0 Header icons/buttons on left of header bar can't get "activated" class due to swipe to go back change #3348

djett41 opened this issue Mar 18, 2015 · 13 comments

Comments

@djett41
Copy link

djett41 commented Mar 18, 2015

Type: bug

Platform: all

When clicking on a button or icon to the left of the screen (x coordinate 45 and under), the activated class never gets added.

In the activator.js file, there is code that will return if the x coordinate is 45 or under. (8ebde73)

I'm sure theres a reason for this code being added as part of the swipe to go back feature, however this does not give a great UX when clicking buttons/icons on the left side of the screen, especially in the header bar, or in modals

An example of this is in the ionic list demo (http://ionicframework.com/docs/api/directive/ionList/ ). The delete circle in the header will not get "activated" unless you click outside of the circle to the right.
@djett41 djett41 changed the title rc0 Header icons/buttons on left of header bar can't get "activated" class due to swipe to go back change bug: rc0 Header icons/buttons on left of header bar can't get "activated" class due to swipe to go back change Mar 18, 2015
@mhartington
Copy link
Contributor

Can you put a codepen together or where you are seeing this?
I wasn't able to replicate this with the nightly builds

@djett41
Copy link
Author

djett41 commented Mar 19, 2015

@mhartington you can replicate it on the ionic codepen /demo for ion-list at http://ionicframework.com/docs/api/directive/ionList/ by clicking on the delete header icon on the left.

@Fayozjon
Copy link

Devin

http://medgorodok.org.ua/opcion_rejting

19.03.2015, 20:10, "Devin Jett" notifications@github.com: you can replicate it on the ionic codepen /demo for ion-list at by clicking on the delete header icon on the left.

—Reply to this email directly or .

@mhartington
Copy link
Contributor

should be fixed via 36df508

@perrygovier perrygovier mentioned this issue Mar 30, 2015
Closed
@djett41
Copy link
Author

djett41 commented Mar 31, 2015

@mhartington @perrygovier Thanks for getting to this quick!

I'm curious, what would be the side effect of removing the hitX check completely? While bumping down the check to 30 from 45 looks alot better, any clicks to the left of the icon under 30 still dont get activated of course, which can give off the impression that the click didn't go through. I have even unconsciously double clicked real fast, thinking that i missed the icon.

Since my app uses nested states, I can't really use the swipe to go back feature anyway unless I change my templates all around which is not on my priority list, so I'm debating forking the repo and removing this code to give users a better experience. I would just like to understand what else this may break.

@mhartington
Copy link
Contributor

@adamdbradley would be able to better explain this.

@mhartington mhartington mentioned this issue Apr 24, 2015
Closed
@Manduro
Copy link
Contributor

Manduro commented Dec 17, 2015

@adamdbradley Could you please explain the need for this? Still all buttons within 30px of the left side of the screen don't get activated.

@CrazedCoding
Copy link

CrazedCoding commented Jul 24, 2016 •
edited
Loading

I am having this exact same issue!!!

showLogOutMenu() never gets called...

<body ng-app="app" animation="slide-left-right-ios7">
<ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21">
<ion-nav-bar class="bar-dark">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-view></ion-nav-view>
<ion-side-menu side="left" id="side-menu21" style="background-color:#000000;">
<div class="title">Menu</div>
<ion-content padding="false" class="side-menu-left has-header">


<h2 id="menu-heading8" style="color:#FFFFFF;font-weight:600;text-align:center;" class=" " data-componentid="heading8">User Name</h2>

<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>

<ion-item id="menu-button26" type="input" class=" button button-balanced button-block " data-componentid="button26">New Shader</ion-item> Sign Out
<ion-item class="range range-balanced " id="menu-range1" data-componentid="range1">Resolution
</ion-item> Toggle Sound
<button id="button-view-live" class=" preview-button button button-balanced button-block ">View Live URL</button> Get Developer URL
<button id="button-live-link" class=" preview-button button button-balanced button-block ">Get Live URL</button>
</ion-side-menu>
`

@CrazedCoding
Copy link

About 36df508: how is decreasing that value supposed to make the side menu any more responsive to my missed inputs (other than putting it to zero / removing it)? I am just getting under the hood of this framework: is there another location in the code that handles inputs for x < 30?

@dkardanski
Copy link

dkardanski commented Oct 21, 2016 •
edited
Loading

@mhartington unfortunately, it was not fixed by 36df508.
Buttons on the left side of the screen don't get active class added when touched. You have to add around 20px left padding for a button for the active class to be added. However, you need buttons on the left without such puddings e.g. back button.

@przemekd
Copy link

@mhartington Please reopen this issue, we still has the same exact issue.

@manucorporat manucorporat reopened this Oct 21, 2016
@brandyscarney brandyscarney removed the v2 label Jan 24, 2017
@jgw96 jgw96 mentioned this issue Jan 24, 2017
Open
@jgw96
Copy link
Contributor

jgw96 commented Jan 24, 2017

This issue was moved to ionic-team/ionic-v1#200

@jgw96 jgw96 closed this as completed Jan 24, 2017
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 4, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@manucorporat @djett41 @przemekd @dkardanski @Manduro @mhartington @brandyscarney @jgw96 @Fayozjon @CrazedCoding