Box ********** The widget allows the creation of complex dashboards by grouping and ungrouping widgets. A group can be placed, dragged, resized as a single item on the canvas, and can also be moved up or down within layers as if it were a single widget. .. note:: Box widget supports only one level of nesting, meaning a Box widget can be placed inside another Box. In short, Box A cannot contain Box B if Box B itself contains another Box C. Widget setting =============== The following image shows an example of a widget setting. \ |IMG1|\ It is possible to customize the widget settings from the inspector panel (in edit mode), as shown below: +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Input value |Description | +======================================+======================================================================================================+ |Title |Sets the title displayed for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Big Widgets Size (in row or column) |Defines the minimum size for graph widgets | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Small Widgets Size (in row or column) |Defines the minimum size for non graph widgets | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Text Color |Specify the text color for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Background Color |Specify the background color for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Border Color |Specify the border color for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Border Width |Specify the border width for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Border Type |Sets the border style for the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Text Size (in units) |1 corresponds to 1em text size | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Font Type |Choose a font family. Either the default or Monospaced | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Layout |Sets how other widgets are placed within the Box widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Alignment |Sets the alignment of the content: left, center, or right | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Padding |Sets padding around the widget | +--------------------------------------+------------------------------------------------------------------------------------------------------+ |Custom CSS |Write custom CSS for the widget container. The syntax is the same as standard CSS used in HTML files | +--------------------------------------+------------------------------------------------------------------------------------------------------+ Widget input ============ Users can group widgets by dragging and dropping them into the Box widget, either from the ``widgets`` section or from existing widgets on the dashboard. It is also possible to move widgets between different Box widgets on the canvas. Widgets dropped into a Box widget are aligned according to the layout defined by the user. The available layouts are: * Vertical: Each widget is rendered on a seperate row. * Horizontal: All widgets are rendered in a single row, side by side. Widgets order ============= Widgets contained in a Box widget follows the order defined by the user. It is possible to drag and drop a widget to the left (in a horizontal layout), above the stack (in a vertical layout), to the right or bottom, or even in the middle, and the order will be preserved. The widgets can also be reordered by dragging and dropping them. Widget handler ============== To help users select and move the Box widget, a handler has been created. It is positioned at the top of the widget when in edit mode, defined by a grey rectangle matching the borders height and 30px wide. The handler supports both selection and drag actions, and disappears once the user switches to run mode. Box Widget configured in Edit Mode: \ |IMG2|\ Box Widget configured in Run Mode: \ |IMG3|\ Sizing Inner Widget =================== Users can resize widgets directly on the dashboard canvas. To resize inner widgets contained in a Box, use the ``size`` section in the ``Layers tab``. Inner widgets can be selected either from the canvas or from the Layers tab. The selected widget in the ``Layers tab`` is highlighted with a light blue border. The Size section under the ``Layers tab`` becomes active when an inner widget is selected. Inner widgets are widgets contained within a Box Widget. An inner widget can be a normal widget or another Box Widget. \ |IMG4|\ Size can be adjusted via the ``Percentage`` field. Percentage applies to the height for vertically aligned Box widgets and to the width for horizontally aliged Box widgets. \ |IMG5|\ Alternatively, the users can specify a custom size in pixels using the ``Width`` and ``Height`` fields. \ |IMG6|\ The default layout of a Box Widget is overridden when the user changes the size of inner widgets using ``Percentage`` or ``Width`` and ``Height``. The layout can be reverted to the default by selecting the ``Default`` checkbox. \ |IMG7|\ .. bottom of content .. |IMG1| image:: _static/img/box_widget_settings.png :height: 628 px :width: 301 px .. |IMG2| image:: _static/img/boxEdit.png :height: 399 px :width: 552 px .. |IMG3| image:: _static/img/boxRun.png :height: 399 px :width: 558 px .. |IMG4| image:: _static/img/layers_tab_selection.png :height: 571 px :width: 847 px .. |IMG5| image:: _static/img/percent_change.png :height: 313 px :width: 787 px .. |IMG6| image:: _static/img/width_change.png :height: 322 px :width: 789 px .. |IMG7| image:: _static/img/default_layout.png :height: 322 px :width: 790 px