How to hide border at header title grid in jqgrid?
for examples : colNames:['Name','Address','School']
If I understand you correct you want to have the following column headers
instead of the standard
In the case can use transparent borders:
<style type="text/css">
th.ui-th-column { border-right-color: transparent !important }
</style>
see the corresponding demo here. The demo still display the hovering effect in the column headers:
UPDATED: If you don't want to use !important attribute you can use the following alternative
.ui-jqgrid-labels .ui-th-column { border-right-color: transparent }
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; }
My jqplot graphs have, sometimes, long texts as tick text.
I'd like to ask if is any way to short that text (using jqplot) and to add a tool tip with full text on the tick label?
I hope this will help someone looking for the same solution, Originally answered by me here.
The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.
Based on the Gyandeep's answer, the exact JS and CSS I used are,
Javascript:
$('div.jqplot-xaxis-tick').each(function (i, obj) {
$(this).prop('title', ($(this).text()));
$(this).css('z-index', 999); // this is important otherwise mouseover won't trigger.
});
CSS:
.jqplot-xaxis .jqplot-xaxis-tick {
position: absolute;
white-space: pre;
max-width: 92px; // Change it according to your need
overflow: hidden;
text-overflow: ellipsis;
}
The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.
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
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");