I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
In my Contact Form 7 on WordPress, I would like to put checkboxes, only for some specific ones, in this way:
The official resource shows a simple css instruction to do it:
span.wpcf7-list-item { display: block; }
This instruction I have used it together with an ID selector as Contact Form 7 requires:
[checkbox test1 "option1" "option2" "option3" id:namefield]
To do that I have create an instruction in css file
#namefield.span.wpcf7-list-item { display: block; }
It is not working. Using browser inspector the code rendered is taken from /wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.9 and it is:
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;}
Instructions from my ID they are not showed.
I'm looking to understand the reason why and what it should better to do to put checkboxes in vertical order.
It's working with the code
#namefield span.wpcf7-list-item { display: block; }
without dot after ID
In WordPress menu, go to appearance -> customize -> custom CSS
Now write below code in custom css area
span.wpcf7-list-item { display:block; }
Is it possible for the Kendo UI for Angular Grid Detail expand/collapse button to be moved to the right of the grid?
It appears that kendo-ui defaults the expand/collapse to the left most column of the kendo grid. I need to see if it is possible to move it to the button to the right.
We can implement it by hiding the current +/- icons using some custom CSS and manually adding such icons to the last column. Then we would need to programmatically expand and collapse the detail template, when clicking the icons in the last column, by using the expandRow and collapseRow functions of the grid.
Combine these plunkers to see
https://plnkr.co/edit/hc8eYXNTZyFqfRvOiCrc?p=preview
.k-icon.k-plus:before {
content: none;
}
.k-icon.k-minus:before {
content: none;
}
.k-icon.k-plus, .k-icon.k-minus{
pointer-events: none;
}
.k-detail-cell{
overflow: visible !important
}
.k-detail-cell section{
margin-left: -32px;
}
https://plnkr.co/edit/HaCEdMYUtAj4RlpebQnj?p=preview
//import components
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '#progress/kendo-angular-grid';
//get the child
#ViewChild(GridComponent) grid: GridComponent;
//modify your logic here
public ngAfterViewInit(): void {
// Expand all first rows initially
for(let i = 0; i < this.pageSize; i++) {
this.grid.expandRow(i);
}
}
I have a dynamically Polymer 2.0 application, but it doesn't seem to work with #apply.
I have CSS variables and mixins:
<custom-style>
<style>
html {
--content-background-colour: #fff;
--content-foreground-colour: var(--paper-grey-700);
--content-mixin: {
background-color: var(--content-background-colour);
color: var(--content-foreground-colour);
}
}
.content-one {
background-color: var(--content-background-colour);
color: var(--content-foreground-colour);
}
.content-two {
#apply --content-mixin
}
</style>
</custom-style>
Then I have themes that users can select and apply:
const theme = {
"--content-background-colour": "var(--paper-grey-800)",
"--content-foreground-colour": "var(--paper-grey-100)"
};
Polymer.updateStyles(theme);
The problem is that only the direct variables update, those set with #apply don't. class="content-one" works, class class="content-two" fails.
What am I doing wrong and how do I dynamically change the styles of mixins?
Polymer still seems to be using same polyfill for variables and mixins that they were using in 1.x, which means dynamic style updating should only be limited to variables and should not work for mixins.
One way you can achieve dynamic styling is by adding and removing classes.
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.