Hiding the JIVE interactive column marker symbol using custom css

Issue:

In a report with a table component, there are JIVE interactivity options which allows for filtering, sorting, formatting as well as a marker for column width resize by dragging the column side ways. How do we hide the icon (which resembles an "upside down triangle") that marks the column width ?

Solution:

The icon for column width resizing is rendered by the dragMarker.png located internally in the jasperreports-6.11.0.jar at location:

netsfjasperreportscomponentsheadertoolbarresourcesimagesjivedragMarker.png

In order to hide this column marker, it can be overriden through javascript inside the overrides_custom.css file of a custom theme. The idea is to reduce the icon pixel width and height to a small enough value that renders it non-visible, such as 1px.  

Original:

#jive_marker_icon {
    background: url(/jasperserver-pro/reportresource/reportresource?resource=net/sf/jasperreports/components/headertoolbar/resources/images/jive/dragMarker.png);
    width: 10px;
    height: 16px;
    position: relative;
    top: -16px;
    left: -10px;
}

Modified:

body #jive_marker_icon {
    background: url(/jasperserver-pro/reportresource/reportresource?resource=net/sf/jasperreports/components/headertoolbar/resources/images/jive/dragMarker.png);
    width: 1px;
    height: 1px;
    position: relative;
    top: -16px;
    left: -10px;
}

Note: With the tracing through FireFox dev console (F12) Inspector tab and by navigating the JIVE interactive menu, you would be able to locate the relevant javascript under the <div> jive_components.

Steps:

1. Create a custom theme folder under Public -> Themes

2. Upload to the custom theme folder using File -> CSS, the overrides_custom.css containing the modified javascript

3. Set the custom theme as the active theme.

Attached are screenshots illustrating a Report with the Firefox Inspector tab being effected by overrides_custom.css file.

overrides_custom_3.css