This is my code
<ons-button modifier="large" id="btnLogin"
ng-click="navMain()" class="login-button">login</ons-button>
When I use it in safari on ios8.4, it doesn't work. I click the button, it is not useful, please help.
That's a bug in Fastclick library that Onsen UI uses internally. Update Onsen UI to the last version (1.3.8 right now) where this library was also updated and fixed.
Related:
https://github.com/OnsenUI/OnsenUI/issues/858
https://github.com/OnsenUI/OnsenUI/issues/851
Related
I am working on a angular material application. i have a page where i need to list number of languages. i am using md-grid-list instead of conventional ul and li.
However when the page loads/refreshes the list gets overlapped for a fraction of second before it gets displayed properly.
Code
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
it would be great if anyone can share a solution for this.
Try to put ng-cloack as an attribute of the "md-grid-list".
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
The order in which you are loading your css,js dependencies could be causing this problem.
If you can move your material library dependency closer to the initial loading of the page, it may fix this. You could test this by putting jquery and material libraries inside your html head as one of your first dependencies to load. These dependencies being global to your app or just on your component can also cause this to happen. Again, you can test that with the previously mentioned approach.
I have also fixed a flavor of this problem naturally by using *ngIf in a div container wrapper around my html and that seemed to allow the dependencies for the site to load prior to showing any content. I would still try rearranging my dependencies, though.
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.
This is the external html:
<div class="modal-header">
<h1>Editor<h1>
</div>
<div class="modal-body" >
<button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`
Here is my example: http://plnkr.co/edit/Zx68EQ?p=info
If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.
Some code is in catalan, sorry if that discourages you to help me.
Thank you!
If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.
In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.
A few other comments I have on your code:
You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.
howto resize angular ui bootstrap modal on large size it looks that it doesn't work ? by the doc page it's enough to add size attribute https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs , also when I try to add size='lg' (with ui-bootstrap version 0.10.0) into example.js open function in plunker from official page it doesn't work http://plnkr.co/edit/lNqi9T8HRUHzcleY68KB?p=preview
I've never had luck with that feature. We just add a class to the modal with the windowClass property and it all works.
CSS
.full .modal-dialog{
width:auto;
margin-left:20px;
margin-right:20px;
}
$modal.open({
template:'blah.htm',
windowClass:'full'
controller:'blahCntrl'
});
It "doesn't work" since the commit where this feature was introduced (https://github.com/angular-ui/bootstrap/commit/976f6083e8485333612b05c023a3c490404543f0) wasn't released yet, so it is not part of the official 0.10.0 release.
You need to wait for 0.11.0 release (hopefully this weekend) or build your own version from the master branch as described here: https://github.com/angular-ui/bootstrap#development
I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.
It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).
So when I click on the link to trigger the editable popover, I got this error in firebug :
TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154
Which is actually this line :
this.$element.data('popover').tip().addClass('editable-popover');
Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...
So I'm running out of idea, if someone knows about it, would be cool !
Thanks !
EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.
Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip
I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/
Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?
Code used:
html:
<div class="container">
<div class="row">
superuser
</div>
</div>
javascript:
$(document).ready(function() {
$('#username').editable();
});
css:
/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}