Styling Options for Widgets and Canvas

You can style the appearance of a widget by changing fonts, colors, axis scaling on charts, and so on, or change its size and set its position in the widget's parent container. You can also style the size of the canvas by defining it as fixed or dynamic.

The styling option is available in both stories and analytic applications. Only the styling options specific to the analytics designer are listed.

Define the Size and Position of a Widget

As an application designer, you can define the size of the widget and set its position in its parent container in the Size and Position section of the Styling panel. The parent container can be a popup, a canvas, a panel or a tab strip.

In the Size and Position, Left defines the widget's distance to the left border of its parent container. The value of left margin can be defined as auto, pixel or percent. When a widget is smaller than its parent container, the sum value of its left margin, right margin and the widget's width should be no bigger than the width of the parent container. But when the parent container is a panel or tab strip, a widget's width alone can be bigger than the width of the parent container. This equally applies to the Top and bottom margin and the widget's height.

Define the Dynamic Layout for the Canvas

As an application designer, you can define the dynamic layout for the canvas in the Dynamic option under the Canvas Size section of the Styling panel.

When you select the Dynamic option, the Canvas Content Layout option displays, from which:

  • If you select the option Center Aligned, all contents in the canvas will always be center aligned horizontally after running the application.
  • If you select the option Fit to Device, the canvas size will be automatically adjusted to the certain device size. If the size or position of canvas’ contents position are defined as auto or percent, their size or position will automatically fit to the device size. You can also enable the Live device preview bar to preview the contents on different devices as shown below.

    Note

    Before wave 2019.20, the canvas content layout of an analytic application is by default center aligned, now it's fit to device.

Configure Whether the Quick Menu Is Visible or Not During Application Runtime

In the Styling panel of a widget, the section Quick Menus controls whether the quick menu bar itself and the options in it are visible or not when running the analytic application. Quick menu here refers to both the quick menu of a widget and data points in a table or chart widget (see the example below).

To disable an option in a quick menu – for example, if you don’t want end users to export a chart for security reasons – you can go to the Styling panel of the chart and uncheck the option Export as CSV in Quick Menus. Then the option won't be available when running the analytic application.