I'd like to apply CSS to a directive element but the following example does not work. Any suggestions?
Directive:
app.directive('test', function() {
return {
restrict: 'E',
templateUrl: 'test.html'
};
});
test.html:
<div></div>
index.html:
<body>
<test></test>
</body>
CSS:
test {
width: 100px;
height: 100px;
background-color: yellow;
}
Here is a plunker:
It's a css issue, just add display: block;:
test {
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
In HTML, Some tags ( like div) get rendered as Block-level Elements by default.
When you create a custom tag it would default to be an inline-element.
Read this article: http://www.impressivewebs.com/difference-block-inline-css/
You can inspect it inside the developer tools:
