Develop Reference

Make cursor turn to pointer on .jqxgrid column headers

I'm working with a jqxgrid and I need to change the cursor to a pointer when hovering on a column's header name. I've tried to use CSS on the .jqx-grid-columngroup-header, .jqx-grid-column-header, and the .jqx-widget-header.
#jqxWidget .jqx-grid-columngroup-header:hover,
.jqx-grid-column-header:hover,
.jqx-widget-header:hover {
cursor: pointer;
}
All this seems to do is have the cursor turn into a pointer around the header but not on the header itself. I would like the pointer to appear when hovering on the words of the header, not the space around it.
I inspected the element on the webpage and it shows me this:
<span style="text-overflow: ellipsis; cursor: default;">Column Name</span>
Clearly, the CSS on the span is overriding anything I do and creating my issue. I tried to search my CSS files for this and could not find it.
Could someone clear this up for me?
EDIT: I'm tagging javascript too. Maybe there's something I could do when the grid is rendering with javascript?

After trying just about everything I could think of I came up with a clunky solution.
In the jqx grid itself, I added a new class to each column header label and that class changes the cursor to a pointer.
In the grid for each column header:
columns: [{ text: "Header Name",
datafield: "Data",
width: 160,
menu: false,
rendered: function (header) {
header.html("<span class='jqxheaderlabel'>Header Name</span>")
}
}]
In my CSS:
.jqxheaderlabel {
cursor: pointer !important;
}
If anyone can come up with a cleaner solution, it would be much appreciated.

Set outline border on a focused element

My code loads various items on some button click event into the document.
I managed to set the focus properly on the first item from those freshly loaded items once there all have been displayed using the following code:
$(function () {
$("a.getfocus").focus();
});
This works but I would also like the browser's default outline to show up on this focused item.
Is there any easy solution to achieve this ?

With the :focus pesudoselector to the element and the outline property:
outline: [properties]
Say, you have a link which usually shows an outline on focus (yep, that's the default behaviour):
<a id="test" href="https://test.com">Test</a>
With CSS, you can do the following:
#test {
outline: 1px dotted red;
}
to get a red outline. Usually, you'd want to do:
a {
outline: none;
}
Back to your question, you can do:
a:focus {
...
// rules
...
}
You can see a small sample here.

How to make row hover cover the selection in datatable?

I want to add a row hover to the Webix datatable using hover property, but it doesn't affect to the selected row by default.
I've tried to modify the :hover of the selection class, but the current notation works only for the hovered cell (while I need a hovered row):
<style>
.bluehover{
background:lightblue;
}
.webix_row_select:hover{
background:lightblue !important;
}
</style>
Snippet here.
Will appreciate any help.

Just change
.webix_row_select:hover{
background:lightblue !important;
}
to
.webix_row_select *:hover{
background:lightblue;
}
Updated snippet

I think the solution from #aisah is not up to date anymore.
Under webix 8 one only needs to set hover:<css_class> and define
.<css_class>{background: <my_color>;} without the hover selector.
Snippet
Webix Documentation

kogrid filter not working - with plunker

I'm trying to use the filter functionality of the knockoutjs ko grid. There are two problems:
the drop-down for the filter shows "Choose columns" but the end of the column names are overwritten by a table symbol
the filter functionality isn't working. As I type the data is not filtered
I have a plunkr for this here: https://plnkr.co/edit/Ibc0WZwyb4melgNDzcUo?p=preview
I have also tried with the most basic of grid options:
this.gridOptions = {
data: self.myData,
enablePaging: true,
pagingOptions: self.pagingOptions,
filterOptions: self.filterOptions
};
Can anyone see where I went wrong please?

li.kgColListItem {
width: 100% !important;
}
li.kgColListItem label{ width:100%; float:left;}
.kgColList{ margin:0; padding:0 0 0 20px;}
.kgGroupIcon{ cursor:pointer;}
Below is the updated Plnkr
https://plnkr.co/edit/1jN4kc0yGZZX5bk0as1t?p=preview

The problem with the filter ui is because of insufficient spacing between the field name and a table symbol. This can be fixed by changing the kogrid css file. Unfortunately my css skills are limited so I'm not able to share the fix here.

customize the style for specific jquery-ui dialog box not all the dialogs?

i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.

Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}

If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}