tip 13 – how to align buttons using CSS (improve design)

tip 13 – how to align buttons using CSS (improve design)
level: moderate

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.

It’s an “up-tempo” video, you might want to pause a couple of times if you want to study the steps.

Timeline and topics:

The CSS code used in the ic3report-local.css file is:

CSS
.ic3-fixed-layout-box.iv-left-indent .ic3-widget-box-content {
    left: 125px;
}

Back to dashboard tips.

Exit mobile version