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.

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.

Dojo filtering widget data overflow

I'm working on dojo 1.6 and I use a dijit.form.Select widget.
The problem I'm facing now is when I select a long text from the dropdown, it goes beyond the width of the widget. I want the string to be enclosed in the width allotted to the widget. I tried using the overflow: hidden attribute but it is not working. Please help. Here is the code segment which I'm working on.
this.dapNAME = new dijit.form.Select({
name : "NAME",
placeHolder : 'Enter Name',
maxHeight : -1,
style : {width: '265px'}
}, this.dapNAME);

I have taken the answer from this link
There is another link which might help too.
you need to style your css. Remember to replace the tundra style with whatever style ( claro, nihilo, etc..) you have chosen for your site.
.tundra .dijitSelect .dijitButtonText {
text-align: left;
}
.tundra .dijitSelectLabel {
width: 120px;
overflow: hidden;
}

bootstrap-multiselect options too long, overruns container

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:
$(function () {
$("select").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ multiple: false }
);
$("[multiple]").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ enableCaseInsensitiveFiltering: true }
);
});
The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.
How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.

By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:
If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:
The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:
.dropdown-menu>li>a { white-space: nowrap; }
In order to fix this, we can return white-space to it's normal wrapping mode with the following css:
.multiselect-container > li > a { white-space: normal; }
Demo in jsFiddle
Couple more notes:
maxHeight takes the number of pixels, so passing in 5 will make the control only 5px high. You should pass in something like maxHeight: 200
enableCaseInsensitiveFiltering does the same thing as enableFiltering so you don't need both. Decide whether you want case sensitivity or not and then set either one to true
Update with further explanation
#user2105811, You do not need to target the label specifically and you do not need to use !important here's the HTML structure and CSS that is generated for this solution:
Notice that white-space is always inherited from the parent, so targeting label will do the same thing as targeting a, but will address the problem at it's root.
The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed after the bootstrap css which should always be the case. If it's not working, I suspect you are not doing this.

Your suggestion to use:
.multiselect-container > li > a {
white-space: normal;
}
doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.
.multiselect-container > li > a > label{
white-space: normal !important;
}

How do I get rid of the padding in my Sencha Touch 2 toolbar?

here it is: http://jsfiddle.net/sd1212/awHkT/2/
There is space between the buttons and I don't want that. I used firebug to try to eliminate the padding. I thought that the layout class was:
x-inner x-toolbar-inner x-layout-hbox
so in my CSS file, I put:
.x-inner x-toolbar-inner x-layout-hbox
{
padding: 0 !important;
}
Nothing happened.
Can someone help me out?
Thanks in advance

A couple of things wrong here
CSS Syntax
.x-inner x-toolbar-inner x-layout-hbox is a wrong syntax.
If you have something like this
<div class="x-inner">
<div class="x-toolbar-inner">
<div class="x-layout-hbox">
Then you'd use :
.x-inner .x-toolbar-inner .x-layout-hbox
or
.x-inner > .x-toolbar-inner > .x-layout-hbox
If you have something like this :
<div class="x-inner x-toolbar-inner x-layout-hbox">
Then you'd use :
.x-inner.x-toolbar-inner.x-layout-hbox
No padding on .x-inner.x-toolbar-innerx-layout-hbox
If you inspect the div with these CSS class, you can see in Firebug that there is not defined padding. So setting it again to 0 won't change anything.
Remove the space between the buttons
However, buttons have a set padding and margin defined like so :
.x-toolbar .x-button {
margin: 0 .2em;
padding: .3em .6em;
height:2.2em // of whatever you want
}
So you should override this class if you want to modify it
Last but not least : Don't override Sencha Touch CSS classes
Don't override Sencha Touch CSS classes, use the cls the attribute on your toolbar like :
cls:'my-toolbar',
and then to something like this :
.my-toolbar .x-button {
margin: 0;
padding: 0;
height:2.2em // of whatever you want
}
Hope this helps