I've got some colorful md-icon and wanna change it to a grayscale one (replace with a different grayscale basically) when it's disabled (and in reverse).
I can definitely use .css to see whether a button's disabled: button[disabled]:hover, but I'm struggling to see how to combine it together with angular directives (I found a similar demo which works on click: https://codepen.io/elishaterada/pen/mDCEl).
Thanks.
¿wich file you use for the md-icon, svg or another img file?
you can use ng-style,
if is SVG you do delete 'fill' inside xml svg,and play with the css propertys
but if you need change the color to div o another the next example work perfect!
https://codepen.io/Gibrain/pen/pOdpdW
i hope hel you
enter code here
Related
I would like to have an input select with a choice of image as an option (would define a custom icon). I can put an image or an icon with Font awesome.
I tried putting
<select>
<option><i class='fas fa-shopping-bag'/></option>
<select>
or replace with an image but nothing work.
Font Awesome font is well imported, I tried with unicode it does not work either
Do you know how to do it ?
Thanks
if you are using reactjs you need to use className instead of class https://reactjs.org/docs/faq-styling.html
I am trying to implement a finite number of colors (like square icons) on the Draftail editor itself. What will be the best way to approach this?
It should be similar to how Microsoft Word displays the font color or something along those lines.
Thanks in advance.
I'm not sure if it's the best approach but here is what I came up with:
https://gist.github.com/benoitvogel/46022124d46de03ed2078603fb24ca97
This defines a new inline style which encloses the selected text between <span class="mycustomclass"></span> (change feature_name according to the CSS class you want to use).
Then, you just have to define the corresponding .mycustomstyle CSS class in your frontend as usual:
.mycustomstyle {
color: purple;
}
You can also modify control['style'] to change the way this style will be displayed in the editor.
You will get 1 icon/label per CSS class, so it's not really like in Word as you won't get a proper selector. I haven't tried it myself, but according to Wagtail docs icon can reference SVG, so you might be able to display color squares instead of labels.
Hope it fits your needs.
I would like to render a view from an Angular directive into an image so that a user could right click on it, and copy it to clipboard. Basically I have a directive that compiles information into a nice Bootstrap scaffold with styling and would like to be able to right click, copy to clipboard, and paste into a document as a img type.
Imagine:
<div class="fancyCss">
<MyCustomHeaderDirective2 dataVal="foo"></MyCustomHeaderDirective2>
<MyCustomBodyDirective2>
<div class="row">
<- Content ->
</MyCustomBodyDirective2>
</div>
So On the page they load up the correct 'foo', see the fancy table, right click, and voila, jpg of table in your clipboard. Currently the process is render, get out snipping tool, click and drag,copy, paste.
For clarity: IS this possible? Does a library exist for this? Most importantly, how do I implement this with an angular directive?
If you are looking for pure client side solution:https://html2canvas.hertzen.com/
Alternatively for more customisable and foolproof solution, you can pass your DOM with inline styling to the server side and render it using phantomJS. Take a snapshot, save it as an image and send back to client.
There is a library available
http://hertzen.com/experiments/jsfeedback/
http://html2canvas.hertzen.com/
How it works
It capturing the html dom content and pasting inside a canvas
In Canvas you can convert the content to image format
I'm new to AngularJS and I'm learning it independently.
I read about ng-if using the official AngularJS website.
I got an exercise which I need to scan a color, and if the color is white (#fff in hex), I should change the span's background-color to black (#000 in hex).
This is what I've tried JSbin.
I involved Javascript because I don't know how to deal with CSS on Angular and I think that's they reason why the code is not working as expected.
Sorry for being ignorant.
Thanks in advance.
You don't use inline JS (onclick) when you have ng-click (or at all, for that matter). I suggest you take a step back and make sure you understand what's going on, and not just put in random bits of code in hope they would give you what you want.
Here's an updated demo.
First, I removed the onClick. then I changed the function to be included in the scope as that's the only way things you put in things like ng-click can find those functions. Last, I changed added a backgroundColor variable to be set to the desired color when the button is clicked, and changed the style attribute of the output element to have a background-color rather than color like you had.
Also, I don't see how ng-if has anything to do with this.
i have a form that contain htmleditor field...
in report module, the content/value of thoose field must be readable and printable
so i am using someone answer to make it printable..
at first, i just make it using displayfield, and just load it using getForm().setValues()
it done,..
this is the simple demo
but now i have a problem...
try to insert bullet/numbering...
and then klik "set and display"...
there is no bullet exist..
i think this is because in main.css they set li{ list-style: none;}.
how to fix it??? how to display htmleditor content in displayfield??
There is no need to include ext-all.css in printing frame. When you remove it, the bullets will be visible. Another thing - why you use this display field? You can print content right away without setting it to displayfield. Example: http://jsfiddle.net/EVYm3/5/