This document explains how to set component heights in the Mobi Platform. It covers three height types: Fixed, Auto, and Custom. This guide also describes how these settings affect the page layout and the features of components that use Auto height by default. Use this guide to master component height settings for flexible page layout adjustments and optimizations.
Overview
Component height controls the overall structure and appearance of a page. The Mobi Platform offers three height setting types to accommodate different design needs: Fixed height, Auto height, and Custom height.
Height types
Fixed height: The component occupies a specified number of grid rows. This setting is ideal for content that does not change size, such as fixed-size images or containers.
Auto height: The component height adapts to its content, such as a text component with line breaks. The height changes dynamically with the amount of content. This setting is useful for content that needs to adjust its height dynamically, such as text.
Custom height: You can define the height using CSS, such as
50vh. The height adjusts dynamically based on the CSS definition.Scenario: This setting is useful for layouts based on the viewport height. For example, you can set the height of a line chart component to
calc(var(--mobi-100vh) - 120px). This expression means "browser viewport height - 120px" and creates a full-screen effect for a custom report.--mobi-100vhis a CSS variable. It is approximately equal to the viewport height,100vh. If the page has a horizontal scrollbar, the height of the scrollbar is subtracted.calcis a CSS function used for calculations.
Setting methods
To set a fixed height, drag the component to resize it. The height is bound to the number of grid rows.
For an auto height, the component's height adjusts dynamically to its content. You do not need to enter a height value.
To set a custom height, enter a height definition, such as calc(100% - 120px), in the custom CSS input box.
Impact of height adjustments on layout
When the height of a component with an Auto or Custom height setting changes, other components below it automatically shift down to accommodate the new height. This dynamic adjustment helps maintain a stable and organized page layout. It prevents components from overlapping or leaving empty spaces.
Default auto height
Some components, such as input boxes, use Auto height by default. You cannot change this setting to another height type. When you select one of these components, the height options are not displayed in the properties panel on the right. The component's height adjusts dynamically based on its content or specific default styles.
Summary
Component height is a key element of page layout and design. In the Mobi Platform, you can choose Fixed, Auto, or Custom height as needed to create flexible and effective layouts.