I'm using md-datepicker in my page. I have a requirement wherein I need to add a CSS class to the rendered input element. Is there a way to modify the markup generated by md-datepicker?
<md-content>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>
PS: Adding a CSS class is just a simple use case scenario. There is a chance that more complex modifications might be required in future. Hence, I'm looking for a way to have control over the HTML of the material design if possible.
There is no way to modify rendered HTML directly.
You can check the source code to figure out the exact rendered HTML and the logic behind it. You can notice for example that the input have the class "md-datepicker-input". If you want to add a class, all you can do is to add a class to your md-datepicker tag (let's say 'my-class'), and then make appropriate selector in your css, for example: md-datepicker.my-class input.md-datepicker-input
Related
I want to edit HTML&CSS code to arrange it differently on the page depending if a condition is met or not using AngularJS (ng commands)
I have thisYear=true or false
If thisYear is true I want the labels and input HTML tags from the page to be arrange in a certain way using inLine css if the year is false I want to arrange it in a different way.
How can I set up an if/else statement in AngularJS (ngIf) and edit the html and CSS inLine?
You need to add something like this in your view:
<div ng-if="thisYear">
<!-- Displays stuff when thisYear is true -->
</div>
<div ng-if="!thisYear">
<!-- Displays stuff when thisYear is false -->
</div>
Also, add the css classes to particular div for styling.
It looks as though there are multiple things that you may be asking for. I think you could benefit from using the ng-style and ng-class directives as well as the ng-if directive.
Using ng-if will allow you to load a div into the DOM based upon whether or not the boolean value is true or false. With this, you can easily arrange your labels in whatever position you'd like.
<div ng-if="inputTrue">
<!-- your input/labels go here and will be loaded into the DOM -->
</div>
<div ng-if="!inputTrue">
<!-- this input will not be loaded into the DOM -->
</div>
In addition to this, you can also take advantage of the ng-class and ng-style directives. Using ng-class will allow you to add a class to the div based on a condition that evaluates to true or false. The same thing goes for the ng-style directive.
It would follow something along the lines of ng-class="{'className':inputTrue}".
I am trying to display html by using angularjs sanitize module and ng-bind-html attribute on the element. It works fine if I have the attribute
on a div element.
<div ng-bind-html="htmlText" contenteditable="false"></div>
But I need the same text in a text area control. When I read about displaying html in text area, my understanding was that
text area does not support this. Is there a way I can convert the html to text before hand in controller and then use only ng-bind on text area? I have multiple long paragraphs and bullet points in html to display as formatted text.
Thanks for any suggestions.
//Does not display formatted html.
<textarea class="form-control" ng-bind-html="htmlText" contenteditable="false" rows="7"></textarea>
textarea only supports plain text. Since you are not allowing the text to be edited, I'd use the div that you started with. I suspect that you're trying to control the size and enable scroll bars when necessary on the div, and hoping to get that out of textarea. You'll be much better off just styling the div accordingly.
I am designing a dynamic hr (horizonatal) rule.
In my Style sheet
hr.my-hr:after{
content:'Generic'
}
In my template
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
But how do i dynamically change the content in the template when using ng-repeat ????
All ng-style does is add inline styles. However you want to add a psuedo element ::after. According to the MDN:
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
So inferred from that you can't use them inline, which sadly means ng-style can't do what your after.
However if your ::after is defined in a stylesheet you can use ng-class to dynamically add that style.
So
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
Most cases that will suffice. However it looks like to want to dynamically set the content of ::after. So for that i can only imagine two options.
If you just want to simply add the string value use databinding
<hr />
{{name}}
However if you want extra styling on that string create a small directive as a re-usable widget may be the better option.
I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
I am working on a responsive website. My site uses Bootstrap 3.1 and AngularJS. Bootstrap has a class called "visible-xs". This class basically says let something be visible on small screens and hidden on larger screens. It does this by changing the CSS display property value between none and block. Currently, I have a div that looks like the following:
<span id="smallContent" class="visible-xs">Mobile Content</span>
I need to do some stuff programmatically in my controller when smallContent changes from visible to hidden and vice-versa. My question is, how do I watch for changes on the display property of smallContent? I've noticed the $watch method on the scope (http://docs.angularjs.org/api/ng/type/$rootScope.Scope). However, this seems to watch for changes to a property in the scope, not for changes to a property in the DOM.
Is there a way to do what I'm trying? If so, how?
Thank you!
You don't need javascript watchers to do what you want. You can, but it would be kind of hacky and potentially bad on performance.
Another point is that "responsiveness" should be handled (a maximum) by HTML/CSS only. If you start having JS different for each resolutions, it's no good.
What you could do :
<span id="smallContent" class="visible-xs">Mobile Content</span>
<span id="smallContent" class="hidden-xs">Not Mobile Content</span>
Keep in mind that you can also simulate media-query in JS with Modernizr :
if (Modernizr.mq('only all and (min-width: 768px)') ) {
}
That can be usefull (you can alos add this to a watcher but, well my answer was primarily CSS-based and you should stick to CSS solutions when possible)