In the previous tip (tip 12) we’ve fixed the position of the vertical axis in the bar chart using a javascript function that maximized the label length to 23 characters. Now we are at it, we can improve even more by aligning the buttons to the chart bars. This can be achieved by using custom CSS in the dashboard.
This video shows how to use custom CSS in your dashboard to further fine-tune the design of your dashboards to your liking. In this particular case, it is the button alignment.
Timeline and topics:
– The video tip starts with the end-result of the CSS addition; buttons aligned with the positions of the bars in the chart. The key to using custom CSS is to add a “hook” to the widget that you want to change.
– This is how it’s done:
– Edit the buttons filter and navigate to the “General” panel;
– select “Advanced Properties” and add a class, in this case “iv-left-indent” to the “CSS Properties”;
– next, display the dashboard in “Layout Mode”;
– select the buttons and right-mouse click to open the Inspector;
– select the buttons HTML part and check the CSS code you need to align the buttons to your liking (left: 125px);
– now, search for the new “iv-left-indent” class and check what the CSS selector should be to target the buttons;
– close the inspector;
– in the toolbar, open “Configuration” and select “Report CSS”;
– add the CSS selector with the CSS that is required for the alignment;
– and here it is.
– But …. it does not work when you publish the dashboard as an application;
– to activate it also there, the CSS need to be set on the server;
– Go to Admin, select “Docs” and navigate to “Docs → Web-Docs →
ic3-report → app-local” and open “ic3report-local.css”;
– put the CSS snippet in this file and save;
– Now, when you refresh the browser, the dashboard app also shows the buttons aligned;
– the CSS in ic3report-local.css will be available to all the dashboards and its classes can be used as showed in this video.
For the CSS code used in the ic3report-local.css file, go-to:
www.inside-vision.com/dashboard-tips
source