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: