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.
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.
I am trying to make the back button icon white in the toolbar of my Ionic 4 app. I have added:
ion-back-button {
--color: white;
}
in my global.scss, but the icon persists in being grey. I have managed to make my toolbar title white.
This is my template:
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
I'd like to be able to simply define a global style to change the colour of all back buttons globally without having to add additional markup to every page with a back button.
Try it in the global.scss with important
ion-back-button{
--color: white !important;
}
Placing it within :root works as well per the docs:
https://ionicframework.com/docs/theming/css-variables#setting-values
:root {
ion-back-button {
--color: red;
}
}
Add the following styles in the global.scss
ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
color: #fff !important;
}
I had this problem just now, the --color variable just doesn't seem to work, however setting color instead with the !important flag did.
Here is what I did, note the focused and hover variables do seem to work if you need to change these.
ion-back-button {
color: #fff !important;
--color-focused: #fff;
--color-hover: #fff;
}
I had this same problem. No matter what I tried, I could not change the color of the ion-back-button from gray. So, I used the Chrome developer tools to inspect the element and learned that a theme for a third-party module that I had loaded was applying that gray color to all span tags. Fortunately, I no longer needed that module, so the answer for me was to simply remove the reference to the theme.
The module that was causing this problem was AWS Amplify.
I am posting this "answer" here to help you or anyone else take a "next step" in resolving this "maddening" problem: use Chrome developer tools to inspect the back button element in the DOM to identify the CSS rule that is being applied.
Check your variables.css file there is should be #media (prefers-color-scheme: dark) section that relates to dark theme colors. Also you need set color light to ion-back-button.
Is there any api in dimple to customize the tooltip color and the font type/size? I'm mainly looking for a way to do this for line and bar charts.
If that's not possible then is there an alternate/recommended way to do this via d3?
I tried searching for a way to do this in the dimple docs but couldn't find anything
You can customize with the CSS class .dimple-custom-tooltip-box. Unfortunately, dimple.js styles a lot of the properties (like fill color) in-line on the element after the class, so you'll need to use a !important to override them:
.dimple-custom-tooltip-box {
fill: red !important;
}
Here's an example.
EDITS
The dimple-custom-tooltip-box is missing on the tooltip for line charts. Not sure why, the docs indicate it should be there. Regardless, switch the css to:
rect.dimple-tooltip {
fill: red !important;
}
and it works for both chart types.
Updated example.
Kendo ASP.NET-MVC
Our designer wants a grid that has no borders or frames and no alternating row backgrounds. Basically a white box without lines. It's for financial reports. plain and simple.
There should be a monocolored header and footer row where the column names and paging go.
Is this achievable? We don't want to edit too much the main CSS as the rest of the controls on the site should have borders and colors. It's just the grid.
Try:
.k-grid, .k-grid * {
background: white !important;
border: 0 !important;
}
This forces all background for k-grid to white removing gradients and background images and sets borders to 0px (no border).
I'm deeply customizing the appearance of a jqGrid with subgrid.
One thing I had to do is to change the Expand/Collapse buttons which is supported by the configuration option, no problem.
The thing is that the width of the column where the Expand/Collapse buttons are is the same size of the images and I want to increase its width.
I tried to "hack" the CSS but I couldn't find a nice way of doing it.
So, is there a way to consistently set the Expand/Collapse column width?
Thanks!
I'll just place my way of doing it.
.jqGridWrapper .ui-sgcollapsed .ui-icon { margin: 8px; }
.jqGridWrapper is a class applied to a div that wraps the grid elements.
I use this to make sure my css customizations will only affect what's inside that div.
Cheers!