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
Related
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
I just installed angular-perfect-scrollbar.
I used the jQuery perfect-scrollbar Plugin but since angular it was thrown out.
Question:
is there a way to update the angular-perfect-scrollbar like $('#container').perfectScrollbar('update'); in jQuery ?
how can I scroll to bottom of container (on content change) with that angular plugin?
If thats not possible with this angular plugin are there alternatives that includes the features above ?
as I tested, you need to add <include-padding='true'> to html tag then it could scroll to bottom(in fact this will change the scroller length, therefore)
it looks like
<perfect-scrollbar include-padding='true'>
<..your stuff..>
</perfect-scrollbar>
cheers
I want to create a menu that looks like the one in AngularJs Material website (https://material.angularjs.org)
Unfortunately there is not documentation or demo to do that.
Any ideas?
Thanks
You can create your own side menu with their directives menuToggle and menuItem, and their menu service, which are found in their source files. I have used this menu in many projects, so I know it works. All you have to do is implement it the same way. I have wrote a blog post that goes through this found here:
How to create an Angular Material Side Menu
There are at least a few pre-built directives for this now... a couple of examples:
angular-material-sidenav
angular-material-sidemenu
As #Splaktar says, you can wait for the official mdListiItem in milestone 0.9.0.
And you can also checkout the whole angular-material project source code and look into here https://github.com/angular/material#building or README.md to build the docs.
First install or update your local project's npm tools:
# First install all the NPM tools:
npm install
# Or update
npm update
Then run the gulp tasks:
# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs
Then you should see the codes you need in 'docs.js', 'css/docs.css' and 'index.html' in the output folder 'dist/docs'.
The 'docs.js' in 'dist/docs' is different from the 'docs.js' in the origin 'docs' folder. Many codes are generated and concated together when you build the docs including those you need.
After you build the docs, the fastest way to get the codes you need is to search 'menuToggle' or 'menuLink' directive or 'menu' factory in 'dist/docs/docs.js'.
Hope this can help you.
Just check out the answer here: https://stackoverflow.com/a/38258961/1904479,
The http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html has a good implementation of the accordion or the expandable list views.
You don't NEED any of this, if you want an identical UX and appearance, I guess there is no reason not to import the service and all. But, if all you want is the collapsability you could solve this with the ng-class directive without importing much; depending how you have your scope setup you might need a different variable for each collapsable zone, something like this:
<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div>
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable">
Stuff that gets hidden
<div>More stuff to hide</div>
</div>
In your controller $scope declarations
$scope.collapsedA = true //if you want it to start collapsed
and then in your css something like
.collapsable{
transition: all .2s ease-in-out;
min-height: 20px;
overflow: hidden;
}
.collapsable.collapsed{
height: 0;
min-height: 0;
}
You will need to wait for mdListItem to support an expand/collapse control. This is tentatively scheduled for 0.9.0.
See https://github.com/angular/material/issues/985
You could have a look at the accordion from angularui.
http://angular-ui.github.io/bootstrap/
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;}
Here's a plunker that replicates the issue I'm having.
Long and short of it, I can get the backdrop to appear, and the console shows the modal being popped onto the DOM, but isn't visible. Not sure if it's supposed to be popped onto a different element or if the visibility is supposed to be set manually somewhere, but I'm following along with the example code and can't make the actual modal dialog appear.
Using Angular-UI 0.6 with Bootstrap 3.0 styles (though I've tried the older Bootstrap versions and multiple angular versions).
http://plnkr.co/edit/p23z5xnjQRmHu8MOfvcv?p=preview
So, I've managed to make this work, cobbling together various parts of an answer from here: https://github.com/angular-ui/bootstrap/issues/722. The trick is that, at least currently, angular-ui doesn't support Bootstrap 3.0 out of the box. However, it can be worked around. The HTML needs to be wrapped in a modal-dialog and modal-content, e.g.:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">blah</div>
<div class="modal-body">blah</div>
<div class="modal-footer">blah</div>
</div>
</div>
Then you also need to add some styles to your CSS:
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
Check below is the working Demo
Model Window Working in Angular-Bootstrap
Working Demo
Based on a discussion here, there are a couple of options:
use patched ui-bootstrap build with $modal fix for bootstrap3
build your own ui-bootstrap distribution with bootstrap3 support, currently hosted in bootstrap3_bis2 branch on github.
$ git clone https://github.com/angular-ui/bootstrap.git ui-bootstrap3 && cd ui-bootstrap3
$ git checkout bootstrap3_bis2
$ npm install
$ grunt
grab needed .js files from dist folder
In the latter case, bootstrap3_bis2 is not yet integrated on master, so you might consider watching ui-bootstrap repo on github, so you could jump back to master as soon as it gets merged in.