Making widgets responsive

When working with web pages, CSS media queries is a common concept to work with when making them responsive. They can be used to define different styles for different media types or devices, for example based on height and width of the device or its orientation.

In addition to media queries, widgets make use of a CSS element queries polyfill. This allows you to apply different styles depending on the object's size relative to the screen size plus the number of columns and cells that a widget spans over in the Qlik Sense grid system.

Usage

The following attributes are supported:

  • min-width
  • max-width
  • min-height
  • max-height

You can use max-width to define a style if the widget has less than a certain width.

<div class="kpi-widget">
    <div class="inner">
        /* Your Content */
    </div>
</div>
.kpi-widget .inner {
    /* default style for the inner element */
}

.kpi-widget[max-width~="300px"] .inner {
    /*  
        default style for the inner element 
        if .kpi-widget has a width of less than 300px 
    */
}

Example

In this example, a separate style is defined using the max-width attribute for widgets where the inner element is less than 300px wide.

<div class="kpi-widget">
    <div class="inner">
        My responsive widget.
    </div>
</div>
.kpi-widget .inner {
    font-weight:bold;
    color:darkgray;
    font-size:30px;
}

.kpi-widget[max-width~="300px"] .inner {
    color:red;
    font-size:16px;
}
Result: widget preview width larger than 300px

Result: widget preview width less than 300px

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?