[TIP 42] Improving your Responsive View with Better Images Layout

Dundas BI introduced Responsive Design, which enables a dashboard to automatically resize in order to fit the available screen space on different devices (desktop, tablet and mobile). Responsive Design leverages template grids and requires a little bit of planning to work properly due to the way controls move around.

A nice way to spruce up a dashboard is with icons. In the screenshot below, we've added a small icon in the frame next to the title. A left padding has been applied to make room for the icon. It looks fine when we're in Edit mode:

Image title


However, when I go to View mode, the dashboard grows wider and the icon shifts slightly:

Image title


This is not ideal as it overlaps with the title. Fortunately, Dundas BI has a property for images that affects how they are positioned:

Image title


Modifying the default to any of the Left-aligned options will keep the left edge "stuck":

Image title