I'm trying to apply some CSS to the headers (just the headers themselves - not the entire column) in a grid. Should be fairly easy I'd think but haven't been able to figure it out.
I've set up a jsFiddle here that contains a grid. I'd like the Name header to be bold, and the DOB header to be red.
Any help would be greatly appreciated, thanks!
If I uncomment cls in your columns definitions it works on fiddle.
try this in your CSS:
.x-column-header-text{color:blue;}
to change headers individually use:
.x-column-header-text#gridcolumn-1011-textEl{color:blue;}
.x-column-header-text#gridcolumn-1012-textEl{color:red;}
check: http://jsfiddle.net/6en2r/1/
forgot to mention the nth-child selector:
.x-column-header:nth-child(2){color:red;}
.x-column-header:nth-child(1){font-weight:bold; color: black;}
Related
I am trying to right-align the column headers in the AgGrid. I know how to do this implementing a custom header component using IHeaderAngularComp and supplying my own template however that seems like a lot of work for something that should be trivial.
https://stackblitz.com/edit/angular-ag-grid-angular-ebvgjb
Align price column heading to right to match alignment with cell contents
I am using the following libraries.
"ag-grid-angular": "21.2.1"
"ag-grid-community": "21.2.1"
If you want all column headers to align right:
defaultColDef: { headerClass: "ag-right-aligned-header"}
If you want a single column header to align right:
{ headerName: "name", field: "field", headerClass: "ag-right-aligned-header" }
You would need to make these 2 changes to the css file to make it happen... since there is a little burger menu which gets visible on hover also.
::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }
Forked your stackblitz with this change here
working stackblitz
fixed by defining template in headerComponentParams.
if you're looking to align some of the numeric columns to the right and other columns to left, you might want to check this link (https://stackblitz.com/edit/angular-ag-grid-angular-hzqdnw ) posted by #Imran in the comment section of the correct answer.
I'm trying to find a solution for this conditional formatting.
When the "INSTALLED" column is "YES" I wish cell "HARD DISK" turns green.
Some idea?
Thanks so much!
Example without conditional formatting:
Example with conditional formatting:
To get an idea how conditional formatting is implemented I suggest looking into assets/js/wpdatatables/wpdatatables.js
Basically it's not quite easy - that's a hint on what you would need to do:
Hook into either .draw() or .row() callback of the wpDataTables.table_1.api() object on the page (in an inline script or in a separate .js file):
Check for the value of the third column (yes/no);
Apply a CSS class for the second column based on the yes/no value (e.g. "green" or "red";
Add CSS rules for ".green" and ".red" classes - setting the background-color to red and to green.
A probable solution is to apply a row CSS rule if the value installed is yes and then a cell CSS rule if HD is not empty.
Then in CSS you could find an easy workaround.
.row-yourclass .cell-yourclass2 {
background-color: green;
}
I'm new to bootstrapper and not very good with the css styles. I need the grey bar to stretch the whole way down the left as on home page. I'm not sure what I'm doing wrong http://www.webconstruct.co.za/wis/terms.asp Thanks in advance.
use Flexbox (available in Bootstrap 4 alpha) - there is an example of similar layout at the end of article (which is not made by Bootstrap, but could be customized like this)
more here: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
This will do the trick but you have to test it for all the pages.
.col-sm-3 {
margin-bottom: -255%;
padding-bottom: 255%;
}
Unfortunately this is not an easy thing to do with just CSS. I'd solve the problem with jQuery.
$(function(){
$('#leftcolmn').height($('#rightcolmn').height());
$(window).resize(function(){
$('#leftcolmn').height($('#rightcolmn').height());
});
});
This solution would work much better if you had some classes or IDs on the two columns that you want to modify and get values from.
The code:
$(function(){
});
Functions exactly the same as:
$(document).ready(function(){
});
I'm trying to turn the round default pager buttons into square ones.
I managed to change the color of them by modifying the CSS of ".cycle-pager span", but its not responding to border-radius:0px;
Can't find anything in the documentation. Perhaps i'm looking for a 'too easy' method.
Any ideas?
That is because the 'template' used by default is '•' which places a text bullet (like from an unordered list) in the span.
To change this, you'll need to change that template using the Cycle2 settings.. something like this:
$('.slides').cycle({
pagerTemplate: '<span class="slide-links"></span>'
});
Then you can use your CSS to target and style those links. Hope that helps!
I have a table with thead and th's. Inside each th I have an image of shape question mark '?'. I want to show a help/tooltip on click of each th's help image. How to do this ?
Please suggest
I would use a plugin. Tooltip is a good one I have used.
there are many plugins for jquery that will do the work :
http://docs.jquery.com/Plugins/Tooltip
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
another plugin I have used:
http://flowplayer.org/tools/tooltip/index.html
Here are some tutorials for tooltips:
http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/