I am having issue getting my css to display. I think its because I applied the html through a directive.
here is my js file:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope){
$scope.user = {
name:'Chelsey',
address:{
street:'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends:[
'Hans',
'chewbacca',
'Leia'
]
}
});
angular.module('app').directive('userInfoCard', function(){
return {
templateUrl:"userInfoCard.html",
restrict:"E",
controller: function($scope){
$scope.knightMe=function(user){
user.rank="knight";
};
}
}
});
my root html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel ="stylesheet" href="style.jade" type="text/css/">
<script src= "app.js"></script>
</head>
<body ng-controller = "mainCtrl" class="container" style ="padding-top:30px">
<h1>Hello World!</h1>
**<user-info-card></user-info-card>**
</body>
</html>
The html that I want the css applied too (user-info-card.html):
<div class="panel panel-Primary">
**<div class="panel-heading">{{user.name}}</div>**
<div class="panel-body">
<div ng-show = 'user.address'>
<h4>Address: </h4>
{{user.address.street}}<br />
{{user.address.city}}<br />
{{user.address.planet}}
</div><br />
<h4> Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div ng-show ="user.rank">
Rank: {{user.rank}}
</div>
<button ng-show="!user.rank" class="btn btn-sucess" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
and my css in jade:
style.
.panel-heading {
text-decoration-color: blue;
}
I am just trying to get my css to display {{user.name}} in blue right now but it keeps saying that the class is never used. I am a little new to this so anything would be helpful.
text-decoration-color is for the color of the underline. You might want to use color instead.
Also, please note that text-decoration-color has, as of now, poor browser support. See browser support on caniuse
EDIT: Jade is a templating engine for html documents, not for css stylesheets. So in your root html, include the stylesheet as the following :
<link rel="stylesheet" href="style.css" type="text/css">
and in style.css :
.panel-heading {
color: blue;
}
Related
I am unable to use angular-intro.js on my angular-material app. I have tried to implement it outside my app on a simplified plunker and still have not had positive results. Can anyone point out to me what I am doing wrong ??
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
I have yet to find an example of someone implementing this on an angular-material app, I have only seen it on an angular-js app. Below is my view. In both my app and the plunker CallMe() never seems to be called.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2" />
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="angularjs#1.5.3" data-semver="1.5.3"></script>
<script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="angular-animate#1.5.3" data-semver="1.5.3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="angular-aria#1.5.3" data-semver="1.5.3"></script>
<script src="https://github.com/itzgAndEnenbee" data-require="angular-messages#1.5.3" data-semver="1.5.3"></script>
<link href="style.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript" src="angular-intro.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body layout="column" layout-fill ng-app="YourApp" ng-controller="DemoCtrl">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe">
<md-toolbar class="top">
<div class="md-toolbar-tools">
<button class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
</div>
</md-toolbar>
<md-content class="md-padding" flex>
<div class="step0" layout-xs="column" layout="row">
<p>Testing</p>
</div>
</md-content>
<md-toolbar class="bottom">
<div class="md-toolbar-tools">
<button class="step2 btn btn-large btn-success">Button 1</button>
</div>
</md-toolbar>
<div id="step1" layout-xs="column" layout="row">
<button class="btn btn-large btn-success">Button 2</button>
</div>
</div>
</body>
</html>
My DemoCtrl is below:
angular
.module('YourApp', ['ngMaterial', 'angular-intro'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.dark();
})
.controller('DemoCtrl', function ($scope) {
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('.step0'),
intro: 'Testing',
position: 'right'
},
{
element: '#step1',
intro: 'Testing',
position: 'bottom'
},
{
element: '.step2',
intro: 'Testing 2',
position: 'right'
}],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc: true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = false;
});
EDIT: So I have been able to fix this in my application by moving the ng-intro-options and ng-intro-method attributes from the same element where the ng-controller attribute was defined. I got this idea from here. This fix did not fix my plunker example, though. And also I am now having an issue in my app where intro.js makes a md-toolbar disappear from view when the overlay is active.
It looks like one or more AngularJS/AngularMaterial files you are loading is causing a problem:
I replaced the files you load with those used by the AM demos
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
and it seems to work - Plunker
Note: rel="stylesheet" should be added to any link tag otherwise the style is not processed.
I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:
Here is the index.html:
<!DOCTYPE html>
<html ng-app="app">
<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="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>
Here is the script.js:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})
Here is the template file userInfoCard.html loaded by the directive:
<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />
<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>
And last but not least, the style.css:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}
So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.
In order to animate ngShow/Hide elements you first need to include ngAnimate module:
angular.module('app', ['ngAnimate']);
Then all you need just a few little CSS rules:
.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}
Demo: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info
You can do it by the following step:
Step1: First add the library/package of angular-animate.js
Step2: Then include the library in the module angular.module('app', ['ngAnimate']);
Step3 You can manipulate the UI like angular.element(element).fadeIn(1000, doneFn);
Check the documentation for Reference :https://docs.angularjs.org/api/ngAnimate
you are missing angular.module('app', ['ngAnimate']); otherwise animations wont work.
You may also wantto add Angular Animate
I just started to use angular-material.
I was trying out grid elements in my example, I am testing flex attribute. In the example, this shows three different color for each flex element, but in the codepen, I am not getting those colors.
Here is my code:
HTML:
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row">
<div flex>
[flex]
</div>
<div flex>
[flex]
</div>
<div flex hide-sm>
[flex]
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
</html>
JS:
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
Please help.
The css is not included in the example. The colors are there to denote the differences between grid size. You can color them using CSS3 nth child selector. You cand find documentation here: http://www.w3schools.com/cssref/sel_nth-child.asp
As an example for your code you can have
#parentDivId div:nth-child(1) {
background: red;
}
#parentDivId div:nth-child(2) {
background: blue;
}
#parentDivId div:nth-child(3) {
background: yellow;
}
So an and so forth. Rename parentDivId with the ID of parent DIV.
DEMO : http://codepen.io/anon/pen/epyQVN
I just started learning to use ReactJS to render views, but I found the bootstrap CSS classes don't work as expected if I insert the attributes directly into the ReactJS components. For example, in the below code, I wish to generate a panel with the classes: panel-default and panel-heading; however, the generated view doesn't carry the bootstrap style. I was wondering why and how to fix, if possible. Please note that I've compiled my ReactJS code and included the compiled JS in the HTML code (see at the bottom).
var taxonGroups = {
identifier: 'ABC-x981',
sources: [
{segmentName: 'segment1', length: 1090},
{segmentName: 'segment2', length: 98},
{segmentName: 'segment3', length: 2091},
{segmentName: 'segment4', length: 1076},
],
fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],
collectionDate: '2001-09-10'
};
var Taxon = React.createClass({
render: function() {
return (
<div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div>
<table class="table table-bordered table-striped table-hover">
{
this.props.data.sources.map(function(source) {
return <Segment name={source.segmentName} length={source.length}/>
})
}
</table>
</div>
);
}
});
var Segment = React.createClass({
render: function() {
return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr>
}
});
React.render(<Taxon data={taxonGroups} />, document.getElementById('container'));
The HTML code:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>
<div id="container">
</div>
<div class="panel panel-default">
<div class="panel-heading">This is Panel Heading!</div>
<div class="panel-body">
This is panel body
</div>
</div>
<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>
In React, the attribute is className, not class. So for example, rather than having
<div class="panel panel-default">
You should instead have
<div className="panel panel-default">
By setting it as class, React ignores that attribute, and as a result the generated HTML doesn't include the classes the CSS needs.
If you run your expected HTML through the compiler, that is indeed what you get.
I had a similar issue when following a React tutorial, i was writing
<div classname="my bootstrap code here">
instead of
<div className="my bootstrap code here">
className should be in camel case for jsx. Hope this helps :).
When I incorporate CKEditor 4.0 with an HTML page without any styles or stylesheet associated, the editor looks fine when it comes to exhibiting bullets and numbers.
However, when I apply the template's stylesheet/CSS, the integrated CKEditor component starts not displaying bullets and numbers properly. I meant it displays the site's stylesheet's bullets which is totally not designated for that context. For e.g. the bullets shows up as a small picture at the right side of each text entry. Or nothing shows up for 1, 2, 3, etc.
How can I make the CKEditor not use the site's stylesheet, but use its own instead. The code snippet looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>FAQ</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/style.css">
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/responsive.css">
<script src="~/Content/themes/construct/scripts/jquery.min.js"></script>
<script src="~/Content/themes/construct/scripts/jquery.simpleFAQ-0.7.min.js"></script>
<script src="~/Content/themes/construct/scripts/js_func.js"></script>
<script src="~/ckeditor/ckeditor.js"></script>
<script>
$(function () {
$('#faq').simpleFAQ();
});
</script>
</head>
<body>
<div class="wraper">
<header class="header">
</header>
</div>
<!-- /top_title -->
<!-- /faq_list -->
<div class="faq_list">
<ul class="filter">
<li class="active all">All</li>
<li class="business">Business</li>
<li class="technical">Technical</li>
<li class="miscellaneous">Miscellaneous</li>
</ul>
<ul id="faq">
#foreach (var entry in Model.MyList)
{
<li class="all business">
<p class="question">
#entry.Question
</p>
#foreach (var newEntry in entry.List2)
{
<div class="answer" id="editable" contenteditable="true">
<h1>#newEntry.Header</h1>
<p>#newEntry.Answer</p>
</div>
}
</li>
}
</ul>
</div>
</body>
</html>
Thanks for the help.
Arash
The best way to overwrite the style sheet are..
Copy the same classes into a new file and link this file after the default site. Ex.
default:
.class1 {font: normal 12px Arial;}
overwrite
.class1 {font: bold 12px Arial;}
2.. Follow the previous process and mark attributes as !important. Ex..
default:
.class1 {font: normal 12px Arial;padding:10px;}
overwrite:
.class1 {font: normal 12px Arial;padding-left:10px !important;}