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.
Related
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
I'm currently working on my exam project, and I have this animated jQuery navigation.
I would like to make the text-color of the white, both when I have mouse over the itself AND when I have the mouse over the menu icon which is shown when you mouse over the <li> elements.
I have tried everything, but haven't found a solution for it.
Demo
Stylesheet
Example: If you have your mouse over Forside (text is white), and then take your mouse over the white house icon, you'll see that the text change from white to black. I want it to stay white.
NOTE: Dont mind the crappy colors or layout, lol, right now I'm just focusing on the menu.
Anyone has a fix for this, please?
Thanks in advance.
The answer above does work:
li:hover a { color: white !important; }
You could also surround the anchor tags with a div with a class of say, "target", and then target the div using jQuery to programmatically set a class with the color property set to white:
$('.target').hover(function(){
$(this).children(':first-child').toggleClass('className');
}, function(){
$(this).children(':first-child').toggleClass('className');
});
Something like that... but the CSS way is much easier :)
Wow, I didn't imagine this being such a hard task. The following might not be an elegant solution, but it works:
li:hover a { color: white !important; }
i need to align cell text to right side.
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
sortable : true,
width : 150,
summaryType : 'sum',
css: 'text-align: rigth;',
summaryRenderer : Ext.util.renderers.summary.sum,
editor : {
xtype : 'numberfield',
allowBlank : false
}
adding align property does not work for me because it also aligns header text
There is a config present for numbercolumn known as align. just use that.
Whenever you are stuck refer the secha docs which is beautifully designed just for beginners.
I am assuming you are beginner and explaining you how to use docs.. for your clear understanding:
First go to search field, to search for a component, method, or event or something else.
In your case, let us assume that you have searched for "numbercolumn", then you can see the following window which displays all the cofigs, properties, methods etc.. Just hover on them and know what "numbercolumn" is related with.
In your case, you are looking for a config which align's the text to right. then you are mostly looking for key words like txtAlign, align, textAlign, etc..
Hence, you will find a config, which is by name "align". just click on it to learn more about it.
After learning about the cofig "align", you might want to test it. For this purpose, the docs have provided inline code editor which is shown in the below image.
The code editor has two tabs, "code editor" and "live preview". The words says everything.
Just add your changes in "code editor" tab and see your result in "live preview" tab.
For example, Adding align: "right" code in the below "code editor".
Updated
CSS:
.columnAlign{
text-align: right;
}
extjs
tdCls: "columnAlign",
As answered Mr_Green you can align the text to the right or left using
align.
For header to remain centrally aligned use css as :
.x-column-header-inner{
text-align:center;
}
Update :
.....//
{
xtype : 'grid',
cls : 'gridCss',
...//other configs
}
.....//
In your app.css file :
.gridCss .x-column-header-inner{
text-align:center;
}
In your index.jsp
<link rel="stylesheet" type="text/css" href="app/resources/css/app.css">
Actually thanks both guys for your posts it helped me alot. I have found one solution myself.
I needed to add id property to my column. For example :
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
}
and then it has its own css class for example : .x-grid3-td-lineAmount so i added suggested css to these classes and it working ok now for me
.x-grid3-hd-inner{
text-align: left;
}
.x-grid3-hd-lineAmount{
text-align: left;
}
.x-grid3-td-lineAmount{
text-align: right;
}
.x-grid3-hd-taxAmount{
text-align: left;
}
.x-grid3-td-taxAmount{
text-align: right;
}
.x-grid3-hd-invoiceAmount{
text-align: left;
}
.x-grid3-td-invoiceAmount{
text-align: right;
}
i think in 4.2 version it is better to use #Mr_Green solution, but in 3.4 this workarround works for me :)
I have implemented the Twitter Type Ahead on my page and it looks great. But for some reason when I arrow down the list of suggestions, the items are not highlighted, but they populate the text box. However, when I hover over the drop down of suggestions with my mouse, the items are highlighted. Is there a reason why the items would not highlight when arrow'd through? If so, how can I accomplish this?
myTypeahead= $('#txtBox').typeahead({
name: 'typeahead',
valueKey: "Value",
remote: 'serviceHander.ashx',
template: ['<p>{{Value}}</p>'],
engine: Hogan,
});
Selected suggestion gets the class .tt-cursor.
.tt-cursor{
color:#f1b218;
}
Found the answer.
Turns out that my CSS properties were getting inherited and I had to set the .tt-is-under-cursor explicitly like so:
.tt-is-under-cursor {
background-color: #000000!important;
color: #FFFFFF !important;
}
UPDATE
The class has been renamed to .tt-cursor
Example:
.tt-cursor {
background-color: #000000!important;
color: #FFFFFF !important;
}
I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.
The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.
Has anyone managed to find a solution to this?
The .btn-group class, which is the container for the dropdown-menu is positioned relatively so altering the z-index of the dropdown-menu class won't do any good. You can position is absolutely and then adjust the positioning from there. Something like this should get you started:
.k-grid-content .btn-group {
position: absolute;
}
.k-grid-content .btn-group .btn {
top: -10px;
}
Link to a jsFiddle that demonstrates it in action.
The problem is to do with the Grid content being permanently set to overflow-y: scroll which it doesn't really need (unless you are a fixed height with the virtualization feature).
By changing the CSS of the grid content to remove the scroll bar, setting overflow: visible and adding extra padding to account for the missing scrollbar, it now works.
I've updated the jsFiddle to demonstrate.
Thanks for all the help.
For future reference, in case you have other grid cells that might contain data that will overflow into other columns with the above fix, you can set a class to the custom grid action column like so:
columns: [
{
field: "Actions",
title: " ",
filterable: false,
attributes: {"class": "actions-column"},
template: <your action button template or template link here>
}
]
Then in the styling for the page add the following CSS:
.k-grid-content tr td.actions-column {
overflow: visible;
}
edit: small css selector change