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.
Related
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.
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/
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 have a DNN skin that has some nice containers. I can drop an HTML module onto the page and apply the container to it. I can put a link in the content of the HTML Module, but what I would really like to do is make the whole container/module area a link to another page - in effect as if it were a great big button. How do I do this?
Of course as soon as I posted the question I found a way, but would still be interested to know if this is the "right" way or even a "good" way.
My solution was to take a copy of the container .ascx and add an "onlick" to the outer DIV, which in turn uses JQuery to locate the first tag and to navigate to the href.
<div class="Container-1 Container-1-color1"
onclick="window.location.href = $('a:first',this).attr('href')">
Note: Use window.location.href, not JQuery .click() or .trigger('click') as this creates an infinite loop.
I then added some CSS to show that an action was available when the mouse was over the container:
.Container-1:hover
{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
border:1px solid gray;
}
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;}