first time using material design with angular and something is not going right I think.
I'm using the md-tab element and everything is fine until I add the md-border-bottom as in this example in the docs of AngularJS MD : https://material.angularjs.org/#/demo/material.components.tabs
the bottom border just won't appear.
here's my template:
<md-tabs md-border-bottom>
<md-tab ng-repeat="league in leagues" label="{{league.caption}}">
{{league.caption}}
</md-tab>
</md-tabs>
and here is the output : http://screencast.com/t/OZrD9xFlQA
I want to mention that this is not the only MD attribute that is not working for me, i assume I've done something wrong, or I'm missing something.
Here is the css and js I linked to my html:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
Thank you very much!
The line on the border appears to come from this CSS rule:
md-tabs[md-border-bottom] md-tabs-wrapper {
border-width: 0 0 1px;
border-style: solid;
}
That's in docs.css, which means it's a style provided specifically for the documentation, not to all consumers of the library. If you want a border, you'll have to apply the style yourself.
Related
See this codepen: https://codepen.io/rscafi/pen/bNXRxY , an example of a sticky footer made with angular 1.3.2:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
If you change the version from 1.3.2 to 1.5.7 like this:
<link rel = "stylesheet" href = "//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel = "stylesheet" href = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material Dependencies -->
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-sanitize.min.js"></script>
<!-- Angular Material Library -->
<script src = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src = "//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>
It doesnt work anymore. Does anyone know how to fix this?
the fix is remove layout="column" or layout-fill in the root div
<div ng-app="materialApp" ng-controller="AppCtrl" layout="column" layout-fill>
What happen is
It doesnt work anymore
It still work but I think in new angular-material.min.css the <footer> load into the DOM by layout-fill, layout-fill forces the layout element to fill its parent container, mean the <footer>...</footer> placed in the bottom of the window (parent) not the page (child <div>...</div> )
https://material.angularjs.org/latest/layout/options
update
Furthermore, if you want it sticky you even no need to delete but add more, so you split your page into 3 sections with
<md-toolbar> and <md-content>
update
edit CSS file with
md-content {
min-height: calc(100vh - 176px)
}
check this out
http://embed.plnkr.co/4TEtW9eQK0iXH4GYhSe9/
I would very much like to integrate in my angular app the Basic Usage template
from Angular Materials.
I really like the transition effect when the <> is clicked.
I already did a search for that directive on their website but did not find it. The closest thing I managed to find is the Toolbar, but it's slightly different in the way that the upper corners are not rounded. Also, using a simple ng-show, will not provided that transition.
Any suggestions on how to achieve this?
You can do that with angular animations which is just some simple CSS with transitions. And you are on the right track with md-toolbar. The demos use it, you just need to set some CSS to round the top corners.
md-card md-toolbar {
border-radius: 3px 3px 0 0;
}
Now add some content below the md-toolbar that you want to toggle and use ng-show on it.
<div class="toggle-content" ng-show="open">
The toggled content!
</div>
Then just check the ngShow documentation on how to animate it with CSS. What you want to animate here is the height of the toogle-content element. When it is hidden, height: 0 is applied, otherwise height: 200px.
.toggle-content {
height: 200px;
background: red;
}
.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
transition: height linear 0.5s;
}
.toggle-content.ng-hide {
height: 0;
}
And of course you need a md-button in the toolbar that toggles the content.
<md-button ng-click="open = !open">
Toggle
</md-button>
Complete example: http://codepen.io/kuhnroyal/pen/XXZPrE
You need to implement something akin to the slideToggle() method in jquery. The Angular Slideables directive provides this functionality.
The straight corners are a custom style implemented in addition to the md-toolbar directive.
It turns out this is the closest thing that I managed to find that suits my needs.
'use strict';
angular.module('ui', ['ui.bootstrap']);
(function() {
angular.module('ui', [
"ui.bootstrap",
"ngAnimate"
]);
var module = angular.module("ui");
module.controller("controller", function($scope) {
var model = this;
model.oneAtATime = true;
model.Operators = [{
ReportItemName: "asd"
}, {
ReportItemName: "fds"
}];
});
}());
<!DOCTYPE html>
<html ng-app="ui">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script data-require="ui-bootstrap-tpls-0.11.2.min.js#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller as model">
<uib-accordion close-others="model.oneAtATime">
<uib-accordion-group heading="Custom template">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<h1>Some Content</h1>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
Other solutions that provide out-of-the-box functionality are very much welcomed.
I am trying to use AngularStrap TypeAhead. The feature seems to work, but only after I click around a bunch (or so it appears). I just have stubbed data now so I know it can't be time from pulling data from API, etc. If I put the data in a dropdown it is available immediately (only like 5 items right now). I am not sure if it is taking a while for the directive to be enabled or what. Really good chance it is user error, just not sure what to look for. I am not seeing anything in the chrome debugger.
html code snippet:
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" ng-model="vm.selectedPart" ng-options="p.partNumber for p in vm.parts" placeholder="Enter Part" bs-typeahead>
</div>
</form>
Vendor Scripts
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.3.js"></script>
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-strap.min.js"></script>
<script src="Scripts/angular-strap.tpl.min.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="scripts/spin.js"></script>
<script src="Scripts/smart-table.min.js"></script>
I had the same issue (or very similar) where the dropdown would only appear if I followed these steps...
Type the first few characters of a valid item in the list
Click out of the input box so that it loses focus
Click back into the input box so that it gains focus again
The workaround suggested by metronomx in typeahead not displaying sometimes 2.2.1 #1588 resolved the issue for me...
Add following css rule: input + .typeahead.ng-hide { display: block
!important; visibility: hidden !important; overflow: hidden; }
Also: You'll want to use bs-options instead of ng-options if you are using ng-strap 2.2.1 and Angular 1.3.15, as alluded to in Angular-strap v2.2.1 not compatible with angular v1.3.15
I am trying to implement a simple angular-flexslider app within my project:
https://github.com/woothemes/FlexSlider
I have been successful in sliding the images, but i cannot get the next/previous buttons to show, also, there seems to be a left margin which shows the previous image.
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
Plunker: http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
Here's what i am trying to achieve: http://flexslider.woothemes.com/index.html
Thanks
I don't know if you still have this issue but I ran into both of these problems myself. The fixes that worked for me are below.
Issue 1 - next/previous buttons not showing
The next and previous buttons are shown using css. Ensure that flexslider.css is included in your page.
Also, if you open up flexslider.css you will see under an "Icon fonts" comment (its near the top) some source urls. Ensure that these source urls match the location of the flexslider font files in your project.
Issue 2 - Left Margin showing previous image
Add the following code to a css file included on your page
.carousel li {margin-right:0;}
I know that AngularJS is framework for HTML.
XUL(XML user interface language) and HTML have the same underlying processing (can use JavaScript and CSS)
Can AngularJS can intergrate with XUL?
Since XUL is XML, the AngularJS syntax needs to be the XML compliant version:
add id="ng-app" to the root element in conjunction with ng-app attribute
<!doctype html>
<html xmlns:ng="urn:ng" id="ng-app" ng:app="optionalModuleName">
<div my-directive="exp"></div>
...
</html>
Use custom element tags such as <ng:view>
To make CSS selectors work with custom elements, the custom element name must be pre-created with document.createElement('my-tag') regardless of XML namespace.
<html xmlns:ng="urn:ng">
<!-- Needed for ng namespace -->
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}
ng\:include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng:include></ng:include>
...
</body>
</html>
the compiler now transparently supports several directive syntaxes. For example while before there was just one way to use ng:include directive: . The new compiler treats all of the following as equivalent:
<ng:include src="someSrc"></ng:include> <!-- XHTML element-->
<div ng:include src="someSrc"></div><!-- XHTML attribute-->
<div ng:include="someSrc"></div><!-- XHTML attribute shorthand -->
<div data-ng-include src="someSrc"></div><!-- data attribute-->
<div data-ng-include="someSrc"></div><!-- data attribute shorthand-->
<ng-include src="someSrc"></ng-include> <!-- Expando Element -->
<div ng-include src="someSrc"></div><!-- Expando Attribute-->
<div ng-include="someSrc"></div><!-- Expando attribute shorthand-->
<x-ng-include src="someSrc"></x-ng-include> <!-- Mozilla X-Tag -->
<div class="ng-include: someSrc"></div><!-- Class property-->
This will give template creators great flexibility to consider the tradeoffs between html code validity and code conciseness and pick the syntax that works the best for them.
References:
How does AngularJS get away with using custom HTML5 element tags and attributes?
Custom XUL Elements with XBL
Make New Tags and Widgets with XBL
AngularJS Guide: IE Compatibility
Behavior Attachment
AngularJS Documentation for Compile: restrict
XML Namespaces don't need URIs
RFC 2141: URN Syntax
urn:schemas-microsoft-com:office:office Namespace