[Request] CSS : Align only pivot table fields to the left

API & Customization Ask Developers
1

Hi,

All my tables automatically align to the right, but pivot tables don't and it looks odd. I know the specific view and table id - what CSS would I use :

From firefox inspector

2

Is it possible to align all pivot table content and titles in app to left rather than by individual view?  If not, I am having difficulty getting the above code to work for my table. Firefox shows .kn-report-view_2812-1 as the pivot table. I need to align headings and text to left and set column width at 8% and adjusting the sample code provided is not working - I am missing something somewhere.

4

Yes !

You need to look at the inspector to get the report view ID and work out the pivot table number (this was a bit trial by error when I had multiple charts and pivots on one view)

To paste into CSS (don't forget to reload your browser view after saving!)

------------------------------------------------------------------------------------------
/* Formatting for a view with a single pivot */
/*Align the heading*/
#view_764 th{
text-align: left;
}
/*Align the contents*/
#kn-report-view_764-1 table td {
text-align: left !important;
}

---------------------------------------------------------------------------------------
/* Formatting a view with multiple pivots */
/*Align the heading*/
#view_691 th{
text-align: left;
}
/*Align the contents*/
#kn-report-view_691-3 table td {
text-align: left !important;
}
#kn-report-view_691-4 table td {
text-align: left !important;
}
#kn-report-view_691-6 table td {
text-align: left !important;
}

-------------------------------------------------------------------------

/* Formatting the column width, color and removing the totals from unneeded columns */
/*Align the heading*/
#view_462 th{
text-align: left;
}
/*Align the contents*/
#kn-report-view_462-1 table td {
text-align: left !important;
}
#view_462 td.kn-pivot-group {
text-align: left;
width:10%;
}
#view_462 td.kn-pivot-calc {
text-align: left;
width:10%;
}

/*Colour the holiday columns (Entitlement)*/
#view_462 td.kn-pivot-group:nth-child(2) {
text-align: left;
background-color:#EBEBEB;
}
/*Colour the holiday columns (Requested)*/
#view_462 td.kn-pivot-calc:nth-child(3) {
text-align: left;
background-color:#EBEBEB;
}
/*Colour the holiday columns (Remaining)*/
#view_462 td.kn-pivot-calc:nth-child(4) {
text-align: left;
background-color:#EBEBEB;
}
/* Remove the total for holiday requested */
#view_462 tr.kn-table_summary td:nth-child(2) {
font-size: 0;
}
/* Remove the total for holiday remaing */
#view_462 tr.kn-table_summary td:nth-child(3) {
font-size: 0;
}


This is what the formatting looked like for the last example with the colored columns and removed totals. Again it was a bit of trial and error to get the correct column numbers


Hope this helps !

5

Find the element you want to align and set

 

.element {text-align: left !important;}

6

Did you get an answer to this question? I'm also looking to do the same.