I am using kendo ui dropdown list and some other pickers. I want to style the selected item background color.
I had tried .k-dropdown .k-state-selected{ background-color: red} but the color of selected item is not changing. It is set to default orange only. But the same code is working for grid and list view.
How can i able to do that.
Regards,
Sri
The following CSS should work for date(time)picker and the dropdownlist:
.k-widget .k-state-selected,
.k-list .k-state-selected
{
background: red;
}
Here is a live demo: http://jsbin.com/efozol/5/edit
KendoUI defines background not just as a background-color: XYZ; but using background-image: none, -webkit-linear-gradient(top, #ffc0cb 0px, #ffc0cb 100%); too
So, start overwriting this definition saying background-image: none;
Related
Whats the best way to style the row selection of the primeng datatable grid? I have a checkbox and when selected the row changes to a bootstrap blue. I want to lighten the color for the row selection.
How do I do this?
I'm not sure if you found your answer anywhere, but the CSS you're looking for is this:
body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight {
/*background-color handles the color of the highlighted row*/
/*color sets the color of the text*/
background-color: #0275d8;
color: #ffffff;
border-color: #0267bf;}
And:
body .ui-datatable .ui-datatable-data tr.ui-datatable-odd.ui-state-highlight {
background-color: #0275d8;
color: #ffffff;
border-color: #0267bf;}
Just paste that in your own CSS file and you can change the highlight color, border color and text color. I'm not sure if it's the best way of doing it, but I was doing it like this last week and that's how I got it working.
Questions: I'm able to change background color of cells but not of the header. Can I change the background color as well as font color of the header in Handsontable?
Add style tag in head of document. This will affect all HOT grids on the page.
Still researching how to make different grids display with different styling.
.handsontable table thead th{
background-color: green;
color:white;
font-weight:bold;
font-size:12px;
}
You could use jquery or css for this. For example, apply a background color to all the span.colHeader:
.handsontable span.colHeader {
text-color: #B2B2FF; /* pink ish */
background-color: #FF7878; /* red */
}
Or even easier, handsontable allows HTML for col headers so as an option, you can supply an array of the headers with HTML:
hot = new Handsontable(container, {
data: items,
startRows: 1,
colHeaders: ['<label id="header1" style="background-color: blue">I'm the first header"</label>', '<label id="header2" style="background-color: red">I'm the second header"</label>']
}
)
test this css to change handsontable header color
.handsontable th {color: #f5ffa5 !important; background: #78DEFF !important; }
I have implemented KendoUI in my WebApp, is there any way of making the grid responsive?
Like, showing fewer columns on smaller resolutions!
Here's my bootstrap-styled Kendo UI grid BEFORE applying the following styles
And here's what you get afterwards. May not be perfect, or what some will consider 'responsive' enough. But, for my users, this works a treat. Phone isn't our target platform anyways, but, now we can at least see what's in the grid, even if we cannot sort it.. etc.
And here are the styles inspired by #Vel's codepen, from earlier in this thread.
His codepen styles are missing a statemetn to hide the colgroup element.. which is integral for this approach.
Be sure to put this CSS in your page flow somewhere AFTER the main kendo CSS file
#media screen and (max-width: 800px) {
.k-widget table {
border: 0;
}
.k-widget table thead, table colgroup {
display: none;
}
.k-widget table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
border-radius: 20px;
}
.k-widget table tr td:last-child {
background-color: #313444;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
background-color: #313444;
color: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
padding-top:1em;
}
.k-widget table td {
display: block;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
There is now a minScreenWidth setting for each column, which hides the column when the browser width is less than the specified. In our application we have set some constants corresponding to the Bootstrap media query breakpoints, so instead of manually specifying the width every time, we use these constants and thus some columns are hidden when you are below e.g. the Bootstrap sm or xs breakpoints.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth
Yes. using the below link you can acheive the kenod grid responsive design.
http://codepen.io/anon/pen/QwPVNW
In media query please use like this
#media screen and (max-width: 600px) {
.k-grid-content > table {
}
}
I am afraid the Grid currently does not provide you with such responsive design.
I have this working in a bootstrap site via jQuery. Here's how I hid the 3rd and 4th (index 2 and 3) columns when the browser is narrow (under 768 px).
dataBound: function () {
$("#contacts tr > td:nth-child(2)").addClass("hidden-xs");
$("#contacts tr > td:nth-child(3)").addClass("hidden-xs");
$("#contacts thead th:nth-child(2)").addClass("hidden-xs");
$("#contacts thead th:nth-child(3)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(2)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(3)").addClass("hidden-xs");
}
Unfortunately this creates an index dependency, so you can't shuffle your columns around without updating these rules.
I have written a JQuery based widget with can be used to make a Kendo Ui Grid responsive.
You can get the widget here: https://github.com/loanburger/ResponsiveKendoGrid
Usage: After creating your grid add the following code:
$('#GridId').responsiveGrid(
{ columnsToShow: ['date','name','surname'], columns you want to show in responsive view
mobileWidth: 860, // screen width to trigger the change
idColumn: 'Id', //ID column
tools: ['excel'] // if you have the excel export option or blank if not
});
What it does is is basically only keeps the first column and hides the other columns but changing the client template used. It then created a items using the columns you specified and stacks then top down.
This works for me in most cases where I am just displaying data but not for inline editing or inline custom controls - that's coming later..
Yes., you can do it by setting width for Grid columns.
if you set columns width, kendo will automatically enable horizontal scrolling for smaller resolutions.
I have a jqGrid and it comes with default background image, I want to change the background image of it. I tried couple of ways as suggested in online
METHOD 1. I added below code in my CSS
.ui-jqgrid .ui-widget-header
{
background-image:url(images/my-header.png) repeat-x !important;
}
METHOD 2.Added below code to load complete event of jqGrid
loadComplete: function () {
$("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}
in CSS I added
.jqgrid-header{
background:red url(images/my-header.png) repeat-x scroll 50% 50%;
border:1px solid black;
color:Blue;
font-weight:bold;
}
and I am loading css files after jqGrid css file but could not achieve it
How can I do it ?? Any sample code please... I am new to jqGrid and jQuery..
First of all you can use ThemeRoller of jQuery UI to customize theme which you use on the page. You can reduce the applying of the theme only to a paer of your page by usage of "CSS Scope" (see the answer).
Alternatively you can specify background of .ui-jqgrid .ui-widget-header. The demo uses the background from "Dot Luv" theme. Additional to background I specified colors of the text and the border to make the look of header better. I used CSS
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
color: #f6f6f6;
}
The resulting grid looks like on the picture below
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)