Cannot override css (padding) on column total cells


I am trying to override the padding on the column total cells to 0px (needed in order to make checkboxes in cells react to all cellclick events).  I have tried using cell.addClass() and cell.attr in onCustomizeCell() to add a class and/or id attribute of ‘noPadding’ to the cells, which is successfully added to the html, and is then configured in the component css as seen below, but it is completely ignored.

if (data.isTotalColumn && data.value===0 && this.viewType!=='Kit Comparison') {
let testsuite=`data.rows[0].caption`;
cell.text=`<label style="width:100%;height:100%"><input type="checkbox" style="width:100%;height:100%" value="${testsuite}" (click)="this.selectRow1($event)" name="checkBoxForm.selectedRows" [(ngModel)]="checkBoxForm.selectedRows[${testsuite}]"></input></label>`
//"text-align:center;background-color:black;color:#FFFFFF;font-family:Arial;font-size:12px;min-width:100px;height:32px;top:220px;left:964px";your code here

resulting html for column total cells:

<div style="text-align:center;background-color:#F44336;color:#FFFFFF;font-family:Arial;font-size:12px;min-width:100px;height:32px;top:94px;left:964px;" class="wdr-cell wdr-total wdr-grand-total fm-grand-total-c noPadding" id="noPadding"><label style="width:100%;height:100%"><input type="checkbox" style="width:100%;height:100%" value="data.rows[0].caption" (click)="this.selectRow1($event)" name="checkBoxForm.selectedRows" [(ngmodel)]="checkBoxForm.selectedRows[data.rows[0].caption]"></label></div>


.noPadding {
padding: 0px !important;
#noPadding {
padding: 0px !important;
div#webdatarocks-div #wdr-pivot-view .wdr-grid-layout {
padding: 0px !important;

The only thing that does seem to get recognized at all to override the “#wdr-pivot-view .wdr-grid-layout div.wdr-cell ” css styling (padding 7px 4px) is adding as seen commented out above – BUT then the column total cells disappear completely and are not inspectable- except for a tiny empy cell wrapped to the beginning of the first row which appears to have the right class. 
Actually what appears to happen if any at all (even without padding=0px, or entirely matching the natively applied style string for the cell) is applied is that the style gets garbled into unreadable text, e.g.:

<div style="0:t;1:e;2:x;3:t;4:-;5:a;6:l;7:i;8:g;9:n;10::;11:c;12:e;13:n;14:t;15:e;16:r;17:;;18:b;19:a;20:c;21:k;22:g;23:r;24:o;25:u;26:n;27:d;28:-;29:c;30:o;31:l;32:o;33:r;34::;35:b;36:l;37:a;38:c;39:k;40:;;41:c;42:o;43:l;44:o;45:r;46::;47:#;48:F;49:F;50:F;51:F;52:F;53:F;54:;;55:f;56:o;57:n;58:t;59:-;60:f;61:a;62:m;63:i;64:l;65:y;66::;67:A;68:r;69:i;70:a;71:l;72:;;73:f;74:o;75:n;76:t;77:-;78:s;79:i;80:z;81:e;82::;83:1;84:2;85:p;86:x;87:;;88:m;89:i;90:n;91:-;92:w;93:i;94:d;95:t;96:h;97::;98:1;99:0;100:0;101:p;102:x;103:;;104:h;105:e;106:i;107:g;108:h;109:t;110::;111:3;112:2;113:p;114:x;115:;;116:t;117:o;118:p;119::;120:2;121:2;122:0;123:p;124:x;125:;;126:l;127:e;128:f;129:t;130::;131:9;132:6;133:4;134:p;135:x;" class="wdr-cell wdr-total wdr-grand-total fm-grand-total-r fm-grand-total-c noPadding" id="noPadding"><label style="width:100%;height:100%"><input type="checkbox" style="width:100%;height:100%" value="data.rows[0].caption" (click)="this.selectRow1($event)" name="checkBoxForm.selectedRows" [(ngmodel)]="checkBoxForm.selectedRows[data.rows[0].caption]"></label></div>

 Any help greatly appreciated.  Using cellclick to add row captions to an array with checkboxes in the cells is the only thing that is working since getSelectedCells () does not in fact return an array when multiple cells are selected.

2 answers

WebDataRocks Team WebDataRocks 16 hours ago

Hello Olga,
Thank you for writing.
You can override the default CSS of WebDataRocks.
Here is the example of how to remove padding for the first level subtotal: 

#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r.wdr-level-1 {
padding-left: 5px !important;

WebDataRocks Team

Olga 16 hours ago

Thank you for your responses.
Unfortunately neither this selector nor the one suggested in the other question work either, and they don’t select any cells using developer tools (

"#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r" selects the left row title cells but
, "#wdr-pivot-view .wdr-grid-layout.wdr-compact-view .wdr-header-r.wdr-level-1" selects no cells

Whereas the selector I had been trying to use does select the correct column total cells using developer tools: “div#webdatarocks-div #wdr-pivot-view .wdr-grid-layout”

But the problem is that in none of the cases, even if the selector is seen to correctly select cells using developer tools, does the css styling get affected at all; that is, the style included in the Angular component’s .css file is not even reflected in the Styles panel of developer tools.

I also tried putting the css elsewhere such as the app’s style.css , app-component.css, or even to edit the webdatarocks.min.css file (copied into a local file) but the former cases also don’t result in any css styles being recognized within the webdatarocks grid at all, and in the latter case  adding the new styles file into angular.json doesn’t work as it says it’s not in the proper format to be applied as a styles file.

Please login or Register to Submit Answer