I'm sure that we all had to deal with very wide grids where labels take more space than the actual data which results in horizontal scrolling. One of the possible solutions is to rotate grid header labels vertically to save space. Here is how it may look in your application.
If you only need to rotate some labels add the following code to Editor->Custom CSS. In the second part of this CSS you can see how to add more fields there
th {
height: 270px;
width: 15px !important;
padding: 0px 5px 5px 15px !important;
}
th[data-field=KMP_KLP__NOT_ACCURATE_] span,
th[data-field=Core] span,
th[data-field=Size] span,
th[data-field=Preferred_Destination] span,
th[data-field=Special_Order_Only__Varies_By_DIV_] span
{
transform: rotate(-90deg);
transform-origin: left;
display: inline-block;
width: 15px !important;
}
If you would rather rotate all labels use the following CSS:
th {
height: 270px;
width: 15px !important;
padding: 0px 5px 5px 15px !important;
}
th span
{
transform: rotate(-90deg);
transform-origin: left;
display: inline-block;
width: 15px !important;
}
