This is a follow up question to this post: Font Awesome icons for Webix tree nodes
The above solution does not work well when "select: true" for the tree. Try it out in the demo here to see what I mean: http://webix.com/snippet/4e85a0ef.
#Aquatic, Could you please update the code with an example so that the Font Awesome icons can replace the 'standard' folder icon AND it works and looks as good as the standard icon in all cases, including when select = true for the tree?
Default styling has some rules for spans, which causes the issue. Just use a different tag for icon hosting. Like follows
webix.type(webix.ui.tree, {
name:"awesome",
folder:function(obj){
if (obj.$count)
return "<i class='webix_icon fa-folder'></i>";
return "<i class='webix_icon fa-file'></i>";
}
});
and
<style>
i.webix_icon{
color: #777;
line-height:27px;
}
</style>
http://webix.com/snippet/9a187ca6
Related
I've added angular material to my project and after creating a custom theme I wanted to change the style of .mat-fab.
_theme.scss:
#use '~#angular/material' as mat;
#include mat.core();
$wb-nightblue: ( ... );
$wb-yellow: ( ... );
$wb-primary: mat.define-palette($wb-nightblue);
$wb-accent: mat.define-palette($wb-yellow, 500, 300, 800);
$wb-warn: mat.define-palette(mat.$red-palette);
$wb-theme: mat.define-dark-theme((color: (primary: $wb-primary, accent: $wb-accent, warn: $wb-warn)));
#include mat.all-component-themes($wb-theme);
.mat-fab {
border-radius: 3px;
}
styles.scss:
/* You can add global styles to this file, and also import other style files */
#import '_theme';
The mat-fab button still doesn't show my custom border-radius, however. Taking a look at the page with the dev-tools I can see that my css-rule exists, but it is overwritten by the default material style. Apparently, angular material adds four <style>-tags to the end of the HTML header, just after my stylesheet gets added by angular, which then overwrite my added style.
...
<link rel="stylesheet" href="styles.css">
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ== */</style>
<style>.mat-button .mat-button-focu...</style> // contains a lot of angular material button related styles.
<style>.mat-icon{background-repeat:...</style> // contains some angular material icon related styles.
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJtYXAuY29tcG9uZW50LnNjc3MifQ== */</style>
</head>
Now this construct makes it of course pretty much impossible for me to overwrite default button styles without resorting to !important. I don't know what the sourceMappingURL styles are doing but I guessed they're responsible for the other two tags being added. I've tried to look for them in my project but couldn't find anything. Google wasn't any help either. If I just remove the styles in the html via developer tools, the buttons then lack the proper material style so they are required, but I'd like to have my styles.css placed at the end of the HTML head, so I can overwrite the parts I want.
I've also checked angular.json for any style entries but the only one is my styles.css, which isn't any surprise, since I'd have other stylesheet links in there instead of the direct <style>-tags.
Is there a way to get my stylesheet to the end of the head?
UPDATE
The reason the below does not work has nothing to do with Angular, but with CSS.
.mat-fab {
border-radius: 3px;
}
Basically, CSS applies styles according to how specific they are.
If you want a style to be applied over another one, you need to be more specific about it.
You can read more on this here.
Now onto possible solutions, which are three:
The important!:
A way to make your styles always apply over another is the use of the important! attribute.
This means that your style will only be overwritten by another style with an important! that is more specific that yours.
Given that Angular Material avoids important! there is little change that this happens. The solution would then be:
.mat-fab {
border-radius: 3px !important;
}
Being more specific with material styles:
Lots of people see the use of important! has an indicator that the CSS was poorly written. An alternative to this is simply being more specific with material on what styles we want to overwrite, like so:
.mat-button-base.mat-fab {
border-radius: 3px;
}
In this case we are using Material's own class to specific that we want to apply our style not just to the mat-fab but to a html element that contains both mat-fab and mat-button-base.
The mat-button-base class is a class that all buttons from Angular Material share.
Define your own class and combine it:
Similar to the previous sugestion, instead of using angular material, you can create your own class and combine it with the mat-fab like so:
.border-3.mat-fab {
border-radius: 3px;
}
And in the html you would have:
<button mat-fab class="border-3">
<mat-icon><!-- Icon here --></mat-icon>
</button>
This approach is clearer if somethings you will use the original material style and sometimes your own styling.
Keep in mind that in all cases, the styles need to be defined in a global style sheet.
According to the Official Documentation if you want to override the style of material component, you should create a file with all your custom styles, them pass it to the styles array of your angular.json.
The above describes how to find it:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-name": {
...
"architect": {
"build": {
"options": {
...
// Add the file here.
"styles": [
// By default, Angular adds the material theme you choose and the src/style.scss file, see below
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
}
}
}
}
}
}
The file you are edditing is related to theming (color palettes and what not).
An example of this is the src/style.scss file. This file is created by default to allow you to create css that will be applied to all HTML Elements and components.
With the above in mind, I would advise that you add your code in the src/style.scss file like below:
/* You can add global styles to this file, and also import other style files */
.mat-fab {
border-radius: 3px;
}
I'm working on a site that was built using ASP.NET MVC and Kendo UI. I'm trying to add a custom icon to a button that is displayed within the Kendo UI grid but I'm stuck.
Here's the code in the grid to set up the button:
command.Custom("copy")
.Text(" ")
.Click("copyNAddEvent")
.HtmlAttributes(new { #class = "copy", title = "Copy this event" });
Here's the CSS for that button:
.k-grid .k-button.copy{
min-width: 40px;
}
And here's the class in the FontAwesome CSS (which is included in the project) that I need:
fa fa-files-o
I'm not great with CSS, and it looks like when you use the Kendo classes, it creates a span with their icon in it. I like the FA icon better anyway, hoping someone can point me in the right direction.
Looks like you are using the MVC wrappers. In that case, what I do is use a column template.
The client template contains the relevant code - an anchor tag with bootstrap buttons and an <i/> for the fontawesome icon. I could add text like "Edit" to the right of this if desired.
Note that this is an edit button on a kendo grid so I include the class k-grid-edit on the anchor so that kendo will perform the edit action. There are other classes for the standard grid actions like k-grid-add, k-grid-delete, k-grid-excel, etc. For something custom you can use your own selector or add onclick to the anchor and remove the unneeded k-grid-edit.
.Columns(column =>
{
column.Template(t => { }).Title("Edit").Width(10)
.HtmlAttributes(new { style = "text-align: center;" })
.HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" })
.ClientTemplate(#"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");
With this technique you will not see the Kendo default icons - just the fa.
You can set it by using the font awesome unicode provided for that icon and putting it in the after psuedo element, just like how font awesome puts their icons on elements. You can find the unicode when looking at the icon details. Here is the fa-files-o one: http://fontawesome.io/icon/files-o/
.k-grid .k-button.copy:after {
content: '\f0c5'
font-family: FontAwesome;
}
I agree with the answer above, just be sure you have the font awesome css file included in your markup.
While creating graphs using vis.js we can specify how the nodes can be displayed using the options.
var options = {
width: '400px',
height: '400px',
edges:{
style:'arrow'
},
nodes:{
shape:'icon'
}
};
by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.
Created a Plunker and the Icons are not showing up.
http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview
Not sure what i am doing wrong.
Thanks
I took a look at your plunker and I fixed it here:
http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview
I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add:
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.
So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50
Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/
and we find: fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons
So the unicode is f0f4 and in javascript we write this as \uf0f4
From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.
For further reference you can take a look at the docs: http://visjs.org/docs/network.html#Nodes_configuration
a working example with multiple icons from fontawesome and Ionicons:
http://visjs.org/examples/network/38_node_as_icon.html
To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)
https://github.com/almende/vis/issues
Good luck!
If I create an HTML anchor tag and set the disabled attribute to true, I get different behaviors in different browsers (surprise! surprise!).
I created a fiddle to demonstrate.
In IE9, the link is grayed out and does not transfer to the HREF location.
In Chrome/FF/Safari, the link is the normal color and will transfer to the HREF location.
What should the correct behavior be? Is IE9 rendering this incorrectly and I should implement some CSS and javascript to fix it; or is Chrome/FF/Safari not correct and will eventually catch up?
Thanks in advance.
IE appears to be acting incorrectly in this instance.
See the HTML5 spec
The IDL attribute disabled only applies to style sheet links. When the
link element defines a style sheet link, then the disabled attribute
behaves as defined for the alternative style sheets DOM. For all other
link elements it always return false and does nothing on setting.
http://dev.w3.org/html5/spec/Overview.html#the-link-element
The HTML4 spec doesn't even mention disabled
http://www.w3.org/TR/html401/struct/links.html#h-12.2
EDIT
I think the only way to get this effect cross-browser is js/css as follows:
#link{
text-decoration:none;
color: #ccc;
}
js
$('#link').click(function(e){
e.preventDefault();
});
Example: http://jsfiddle.net/jasongennaro/QGWcn/
I had to fix this behavior in a site with a lot of anchors that were being enabled/disabled with this attribute according to other conditions, etc. Maybe not ideal, but in a situation like that, if you prefer not to fix each anchor's code individually, this will do the trick for all the anchors:
$('a').each(function () {
$(this).click(function (e) {
if ($(this).attr('disabled')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
var events = $._data ? $._data(this, 'events') : $(this).data('events');
events.click.splice(0, 0, events.click.pop());
});
And:
a[disabled] {
color: gray;
text-decoration: none;
}
disabled is an attribute that only applies to input elements per the standards. IE may support it on a, but you'll want to use CSS/JS instead if you want to be standards compliant.
The JQuery answer didn't work for me because my anchor tag is on a form and on my forms I use asp field validators and they just weren't playing nice. This led me to finding a pretty simple answer that doesn't require JQuery or CSS...
<a id="btnSubmit" href="GoSomePlace">Display Text</a>
You can disable the element and it should behave as input types do. No CSS needed. This worked for me in chrome and ff.
function DisableButton() {
var submitButton = document.getElementById("btnSubmit");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Of course you'll be doing a loop to disable all anchor tags in the DOM but my example shows how to do it for just one specific element. You want to make sure you're getting the right client id of your element but this worked for me, on more than one occasion. This will also work on asp:LinkButtons which end up being anchor tag elements when rendered in the browser.
I am creating a website and i want to allow personalization to individual users upto some extent like changing font family, background color etc. The problem with this is that, my default css file that i load has already default classes for everything. Now when i fetch the background color from my database, then if there is null value for background color then default css class of mystylesheet.css should be loaded and if the value is not null, then i want to override this with my default css. How is it possible? Thanks in advance :)
Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.
Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.
The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body
if you have the option of using javascript
<body class="theme-1">
<div class="main"><div>
</body>
Then each of your style sheets should contain the theme name in the declarations:
--theme1.css
.theme-1 div.main {
background-color: #eee
}
--theme2.css
.theme-2 div.main {
background-color: #f30
}
To switch style sheets, you just remove the old theme name and add the theme you want to use.
Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.
New Improved Answer:
I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.
For an example, use firebug and look at
http://www.extjs.com/deploy/dev/examples/themes/index.html
Look for styleswitcher.js and look at the function setActiveStyleSheet
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
EDIT:
Reason for CSS property precedence?
One way is to produce the css file dynamically from a php script.
You would include the file like:
<link rel="stylesheet" type="text/css" href="css.php">
And the css.php file would look something like this:
<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>