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
Related
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
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
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 have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I would like to use textAngular directive, but I also need text color changing functionality, which as far as I know, is missing.
Is it really missing, or it's just an hidden option that i didn't find?
Thanks for your answers.
Take a look at this Full Featured textAngular
which adds the following additional features to the existing plugin
Colorpicker via angular-bootstrap-colorpicker
Font family
Font size
Indent / outdent
Added angular-ui bootstrap dropdown toggle to hold common items
h1-h6 and p formatBlocks
text alignment