Onsen UI popPage() issue - angularjs

Currently I'm developing a phonegap application using onsen ui and angularJS. I'm trying to pop a page using
<ons-back-button onclick="myNavigator.popPage()">Back</ons-back-button>
I've used same code for "Back" button on every page. But the problem is when I push multiple pages using
<ons-button modifier="large" onclick="myNavigator.pushPage('in_menu.html', { animation : 'slide' } )" style="margin: 220px auto;">
Next
</ons-button>
and when I use "Back" button, it Pops two pages instead of only one page. Some please help me to solve this issue.

I seem to be unable to reproduce the issue only with the information provided unfortunately. Here's a working Demo.
Maybe you could provide a codepen, so that we can see it. Sorry if I'm not being of much use.
On a side-note - if you just have a backbutton in your page it should be able to have the same functionality by default. Maybe somehow in your case the default wasn't prevented but yours is also executed.
Another very important note here is the version of onsen since there were some changes regarding this behaviour.
If you're using the a recent version you could try to use onClick property instead (however you need to do it in javascript, not in the html).
I can update my answer if you provide some more info :)

Related

How to invoke the Flow, On Button Click from LWC(Salesforce)

I have requirement where I have to load flow having different screens, on click of button in LWC.
I found only one blog related to this is :
https://unofficialsf.com/developer-topic-insert-screen-flows-into-your-lwc/
but not working for me. Please help me on it, how we can achieve it.
Have you tried using the lightning-flow-support LWC component?
The component documentation.
I've also found a usage example.

Angular material form input box styling not displaying properly

I came accross a form wizard by Afrad on github material-wizard and will like to implement it because of its angular-material properties. The downside is that the text-boxes turn out totally different from the angular styling. Is there a way to fix this? what causes this and how do you go about the fix. I have tried using ngWizard as well and face the same issue. the forms display okay without being encapsulated in the wizard directive.
A link to a plunker showing the demo is on the github page. Attached below is a snapshot of the plunker.

Removing Material Design Lite Button Hover Effect

I am using Material Design lite in my mobile app.
With the buttons, the hover effect is added when it is touched, but it doesn't go away until another press is recorded.
With buttons as links this isn't too bad, but for a button that does an action, it doesn't look that good.
Is there a way to remove the hover effect after a period of time (EG 500ms)?
I have looked at removing the effect, but the lack of feedback doesn't help. Perhaps triggering a click on an unused part of the screen might work.
Edit: The answer below was a solution to a similar problem on the desktop, but it does not seem to be a fix for mobile platforms.
Also, development of Google's Material Design Lite is now in limited support (as of Dec. 2016), in favour of their newer Material Components for the Web, which still seems to be in early development. Their current button demo still has the same behaviour described in the post.
Original: On the desktop, the hover effect should remove itself automatically if you are using the mdl-js-button class. Here's a quick example:
<button class="mdl-button mdl-js-button">
Button with JS
</button>
<button class="mdl-button">
Button without JS
</button>
<!-- Remember to include the MDL JavaScript code -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
JSFiddle

AngularJS window does not render (blank page) but resizing window renders it

I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.

When Go to Previous Page using href two pages merge in ionic

I am using ionic for phonegap to build mobile app.
As i have written all code and now when I click back button to returns, some times shows like below attached image.
I have used href="#/pagename" to change page in html.
After long Research I found the solution.Below is the refresh link and the solution.
http://blog.ionic.io/preparing-for-ios-9/
:)

Resources