I need to change the font color of the calendar that appears after clicking on a Kendo datepicker widget. I have been able to change the font size, the background color, but I can't seem to be able to change the font color to display the calendar header (month), week days, or days of the month.
Is there a way to do it, or perhaps this is not a supported feature in Kendo Calendar right now?
Thanks in advance.
You can try the following in your custom css file or in the page header style
.k-calendar .k-header .k-link {
color: #ff0000;
}
Use the browser developer tool F12 and look at the style involved in it and update it as you like.
Related
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
Is it possible to show only asc or desc icon at time of loading of data into jqgrid?
How can i customise like color of icons?
The main problem, which you have: you use very old version 4.4.3 of jqGrid, which is almost 5 years old. The old jqGrid don't allow to display only one sorting icon. Moreover it allows to use only old jQuery UI icons, which uses PNG images for icons. The color of png images can't be changed for different icons because every icon is a part of one image like this one:
You can see that above image, used by Redmond team, uses blue color for all icons. It makes more complex to implement your requirements.
I'd recommend you to consider to upgrade to the current version (4.15.1) of free jqGrid - the fork of jqGrid, which I develop staring with end of 2014. The fork is compatible with 4.4.3.
Free jqGrid supports many new options, like the option showOneSortIcon: true, which you need. Moreover, it allows to include CSS of Font Awesome 4.x font-awesome.min.css and to add iconSet: "fontAwesome" option to replace all jQuery UI icons to vector-based Font Awesome icons. See here an example of usage. As the result you can easy specify any color for any icon. For example, the demo https://jsfiddle.net/OlegKi/2cgyL4qx/ uses the following CSS rules in combination with showOneSortIcon: true and iconSet: "fontAwesome" options:
.ui-jqgrid .s-ico > .ui-icon-desc.fa {
color: green;
top: -0.3em;
}
.ui-jqgrid .s-ico > .ui-icon-asc.fa {
color: red;
top: 0.1em;
}
As the result the asc/desc icons looks like on the pictures below
Free jqGrid contains many other options, which allows to customize sorting icons (see here). For example, one can full overwrite the standard icons to your custom icons and uses the icons, for example, depend on the type of data in the corresponding column. You can try one more demo https://jsfiddle.net/OlegKi/1c7rxfLn/ and to examine the sorting icons in different columns. You will see 3 different group of icons: for numeric, alpha and other types of data. The sorting icons will look like on the pictures below:
If I correctly understand the question you can use grid option viewsortcols. More you can find in the docs of this version here
How to disable blue highlight from this kendo list :
Thank you in advance
You can do it with some creative style overriding to get the effect you want.
i.e.
<style>
.k-item.k-state-selected.k-state-focused:not(:hover) {
background-color: transparent;
color: inherit;
}
</style>
will get rid of the blue highlight colour but still show the grey highlight when hovering and it also fixes the font colour back to black. So you get black on transparent instead of white on blue.
http://dojo.telerik.com/#Stephen/EtUXE
But it can be difficult to get the CSS selector just right to only change the particular styling you want without affected other kendo widgets on the page that use similar styling selectors.
Getting the correct style rule is particularly difficult in this case because the list portion that pops up is a disconnected popup that is not a child of the dropdownlist so you can't use a child selector to only target dropdownlist popups...as you can see in my dojo example, both dropdownlists are affected, as would an comboboxes and any other kendo widgets that use the same style rules.
I've noticed this for a while now on my Kendo Grids. I haven't been able to find anything on SO or the Telerik Support Forums about it so I figured I would just ask to see if anyone else has this same issue.
Basically, if I set my Kendo Grid to have vertical scrolling, the heading columns for my grid are then offset by the width of the scrollbar which appears in the grid body.
I'm not sure if this is a CSS conflict that I have somewhere or if this is just the way Kendo intends it to be (doesn't seem right though).
Here is a screenshot of what I'm referring to:
As I expected, it was a CSS style that was causing this problem.
Someone at some point overrode the default .kendo-grid-header class and gave it a padding-right of 0px instead of the default 17px.
Changed it back and now it's displaying as I expect it to.
Thank you so much for this answer! While it didn't work for me with the latest version of kendo-grid, it was the reason that I was able to find the answer in the latest version.
We were overwriting the default .k-grid-header class. Inspecting the HTML, we found that the latest version has the padding as 0px 16px 0px 0px.
in the Mac application I am currently developing the users will need to be able to print lists and reports of some of their data. I would like to use html and css so that the reports will be slightly more customizable.
I tried to do a test with the background-color css styling applied to a div and although the color would show up in the WebView nothing I tried would cause it to show up in the print preview. Is there any way to allow the background-color style to be printed?
I tried to do a test with the background-color css styling applied to a div and although the color would show up in the WebView nothing I tried would cause it to show up in the print preview. Is there any way to allow the background-color style to be printed?
Yes.