Fixed Layout

Overview

Display blocks in Responsive UI often use responsive layout, where they take as much height as needed, with their width set by the layout grid. There’s one vertical scrollbar for the entire page.

But Responsive UI also supports fixed layout, where all display blocks fit fully within the visible viewport. Each display block has its own internal scrollbar for handling any content overflow. This approach works well for views where all display blocks need to be visible on the screen at once.

When the screen width or height drops below threshold values that you specify, the fixed layout drops into a vertical scrolling list of display blocks. This behavior allows the view to also support smaller screen widths, including mobile devices.

The fixed layout will update automatically whenever the page loads or resizes and when you expand or collapse the nav bar.

Fixed Layout with Splitters

Any view that uses fixed layout can include splitters between the display blocks. Users can drag splitters to resize the display block layout. Since this is fixed layout, the other elements in the layout resize to accommodate the changes, fully filling the viewport.

You may consider storing the view’s splitter settings after the users drag a splitter and using the saved splitter settings the next time the view displays.

Fixed Layout for Group Boxes

While fixed layout is primarily used for display blocks, it’s also supported for group boxes. You can use fixed layout at the display block level without using it at the group box level, but if you use fixed layout at the group box level, you must also use it at the display block level. Also, if you’re using fixed layout at the group box level, you can use it for group boxes in some display blocks and not others.

Development

In fixed layout, all display blocks fit fully within the visible viewport. Each display block has its own internal scrollbar for handling any content overflow. This approach works well for views where all display blocks need to be visible on the screen at once. Fixed layout can also be used with group boxes.

Fixed layout involves three things:

• Display blocks (and occasionally group boxes) that use a fixed layout
• Fixed layout elements that wrap display blocks and group boxes
• Fixed layout containers that wrap fixed layout elements and define a layout

Each layout is either horizontal or vertical, specifying the direction in which its children are laid out. Horizontal layouts display their children from left to right, while vertical layouts display their children top to bottom. You can nest vertical layouts within horizontal layouts and vice versa, creating more complex layouts. (While you can nest horizontal and vertical fixed layouts within each other, you cannot nest a display block within another display block or a group box within another group box. Nesting here refers to nesting a fixed layout container div within another fixed layout container div.)

Each element in a horizontal layout is assigned a specific width, while each element in a vertical layout is assigned a specific height. Widths and heights can be specified either as a fixed pixel size or “star” size, meaning the element takes the remaining width or height.

While these complex fixed layouts look good at larger screen sizes, they can be difficult to see at smaller screen widths where there isn’t enough room to fit all container components within the visible viewport. For this reason, you can optionally specify a threshold width and/or a threshold height for the fixed layout. When the screen width drops below the threshold width or the screen height drops below the threshold height, the fixed layout drops into a vertically scrolling list of container components, one on top of the other. To maximize responsiveness, you should experiment with each fixed layout and determine at which threshold width and height the fixed layout starts becoming unusable, then use those values for the layout’s threshold width and height. By default, the layout will only drop into vertical scrolling mode at mobile size.

Web component development

Component reference

rui-fixed-layout-container

rui-fixed-layout-element

as-split

as-split-area

Implementation

Defining a Fixed Layout

Begin by importing the rui-layout module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

Add the following attributes to the rui-function-view component to set up the view for fixed layout:

• isFixedLayout="true": This tells the function view to use fixed layout.
• fixedLayoutThresholdWidth="x": where “x” defines the screen width in pixels below which the fixed layout should drop into vertical scroll mode.
• fixedLayoutThresholdHeight="y": where “y” defines the screen height in pixels below which the fixed layout should drop into vertical scroll mode.

Add the following components to define a fixed layout:

• Wrap each display block in the view with a rui-fixed-layout-element component.
• Wrap a rui-fixed-layout-container component around the rui-fixed-layout-elements for each fixed layout in the view.
  • Set the rui-fixed-layout-container’s orientation property to ‘horizontal’ for a horizontal fixed layout or to ‘vertical’ for a vertical fixed layout.
  • You can nest instances of rui-fixed-layout-container within other instances of rui-fixed-layout-container to define more complex fixed layouts that include both horizontal and vertical layouts.
• Set the width property for each fixed layout container and fixed layout element in a horizontal fixed layout, or set the height property for each fixed layout container and fixed layout element in a vertical fixed layout. Use one of the following values for the property:
  • Fixed size:
    • If you want to specify a numeric size in pixels for the element, use a value of 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, or 2000.
    • For example, to specify that the element’s size should be 350 pixels, assign a value of “350”.
    • If you need a size that isn’t exactly one of those values, choose the value in the list above that is closest to and works best with your layout.
  • “Star” size:
    • If you want a container div or container component to take the remaining width or height, use a value of “star”.
    • If you assign star size to more than one element in the same layout, those elements will divide the remaining width or height equally.
    • For example, if you have two fixed layout elements that you want to split the width, assign a value of “star” to each.
    • At least one element in every layout must have star size (including nested layouts) or the layout won’t have the nice rectangular shape we’re looking for in a fixed layout.
    • You can also assign a value of “2-star” to an element that should take a double fraction of the remaining size or a value of “3-star” to an element that should take a triple fraction of the remaining size.

Fixed Layout for Group Boxes

You can use fixed layout at the display block level without using it at the group box level, but if you use fixed layout at the group box level, you must also use it at the display block level. Also, if you’re using fixed layout at the group box level, you can use it for group boxes in some display blocks and not others.

Example: Fixed Layout for Display Blocks

In the code sample below we see that the function view element defines this as a fixed layout view with a threshold width of 1000 pixels and a threshold height of 650 pixels. This means the fixed layout will drop into vertical scroll mode if the screen width is less than 1000 pixels or the screen height is less than 650 pixels.

We see fixed layout components used to define the layout. The outermost layout container defines its layout direction as horizontal. This means that its children will be laid out left to right.

Inside that, we see the “Customer Info” display block. It has “star” width, meaning it gets all remaining width left over in this horizontal layout.

The next element in the horizontal layout is a nested layout container div. It has a width of 300, meaning this nested layout will have a width of 300 pixels. This layout defines its direction as vertical, meaning that its children will be laid out top to bottom.

Within the nested vertical layout, we see two display block fixed layout elements. The “Photo” display block has a height of “300”, meaning it will be 300 pixels tall. The “Text” display block has a size of “star”, meaning it will get all the remaining height left over in the vertical layout.

<rui-function-view titleText="Fixed Layout"
    isFixedLayout="true" fixedLayoutThresholdWidth="925" fixedLayoutThresholdHeight="700">

    <!-- This is a horizontal layout -->
    <rui-fixed-layout-container orientation="horizontal">

        <!-- This display block gets all remaining width -->
        <rui-fixed-layout-element width="star">

            <rui-display-block titleText="Customer Info">
            </rui-display-block>

        </rui-fixed-layout-element>

        <!-- This is a nested vertical layout and is 300 pixels wide -->
        <rui-fixed-layout-container orientation="vertical" width="300">

            <!-- This display block is 300 pixels tall -->
            <rui-fixed-layout-element height="300">

                <rui-display-block titleText="Photo">
                </rui-display-block>

            </rui-fixed-layout-element>

            <!-- This display block gets all remaining height -->
            <rui-fixed-layout-element height="star">

                <rui-display-block titleText="Text">
                </rui-display-block>

            </rui-fixed-layout-element>

        </rui-fixed-layout-container>

    </rui-fixed-layout-container>
    
</rui-function-view>

Fixed Layout with Splitters

Any view that uses fixed layout can include splitters between the display blocks. Users can drag splitters to resize the display block layout. Since this is fixed layout, the other elements in the layout resize to accommodate the changes, fully filling the viewport.

To include splitter support in your fixed layout views, add angular-split to your package.json file and use npm install to install its module.

"angular-split": "x.y.z",

Import the AngularSplitModule from angular-split in your app.module.ts.

import { AngularSplitModule } from 'angular-split';
@NgModule({
    ...
    imports: [
        ...
        AngularSplitModule.forRoot(),
        ...
    ],
    ...
})

Here is HTML that recreates the first example above using splitters. See the “Fixed Layout with Splitters” view in the sample app for a more detailed example.

<rui-function-view titleText="Fixed Layout Example"
    isFixedLayout="true" fixedLayoutThresholdWidth="1000" fixedLayoutThresholdHeight="650">

    <!-- This is a horizontal layout -->
    <as-split unit="pixel" direction="horizontal" gutterSize="7" useTransition="true">

        <!-- This display block gets all remaining width -->
        <as-split-area size="*">
            <rui-display-block titleText="Customer Info">
            </rui-display-block>
        </as-split-area>

        <!-- This area is 300 pixels wide and contains a nested vertical layout -->
        <as-split-area size="300" minSize="200">

            <!-- This is a nested vertical layout -->
            <as-split unit="pixel" direction="vertical" gutterSize="7" useTransition="true">

                <!-- This display block is 300 pixels tall -->
                <as-split-area size="300">
                    <rui-display-block titleText="Photo">
                    </rui-display-block>
                </as-split-area>

                <!-- This display block gets all remaining height -->
                <as-split-area size="*">
                    <rui-display-block titleText="Text">
                    </rui-display-block>
                </as-split-area>

            </as-split>

        </as-split-area>

    </as-split>

</rui-function-view>

Angular wrapper development

Wrapper reference

as-split

as-split-area

Implementation

Defining a Fixed Layout

Add the following attributes to the jha-function-view component to set up the view for fixed layout:

• jhaIsFixedLayout="true": This tells the function view to use fixed layout.
• jhaFixedLayoutThresholdWidth="x": where “x” defines the screen width in pixels below which the fixed layout should drop into vertical scroll mode.
• jhaFixedLayoutThresholdHeight="y": where “y” defines the screen height in pixels below which the fixed layout should drop into vertical scroll mode.

Add one of the following CSS classes to each layout container div in your fixed layout to specify that layout’s direction:

• Add the jha-fixed-layout-container-horizontal CSS class to a div that defines a horizontal layout.
• Add the jha-fixed-layout-container-vertical CSS class to a div that defines a vertical layout.

Add one of the following CSS classes to each container component and each layout container div in your fixed layout to specify that element’s size in the layout:

• Fixed size:
  • If you want to specify a numeric size in pixels for the element, add the jha-fixed-layout-size-X CSS class to the element, where “X” is one of 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, or 2000.
  • For example, to specify that the element’s size should be 350 pixels, add the jha-fixed-layout-size-350 CSS class to the element.
  • If you need a size that isn’t exactly one of those values, choose the value in the list above that is closest to and works best with your layout.
• Auto size:
  • If you want a container div or container component to take only the size that it needs based on its content, add the jha-fixed-layout-size-auto CSS class.
• “Star” size:
  • If you want a container div or container component to take the remaining width or height, add the jha-fixed-layout-size-star CSS class.
  • If you assign star size to more than one element in the same layout, those elements will divide the remaining width or height equally.
  • For example, if you have two container components in a layout that you want to split the width, assign the jha-fixed-layout-star CSS class to each.
  • At least one element in every layout must have star size (including nested layouts) or the layout won’t have the nice rectangular shape we’re looking for in a fixed layout.

Fixed Layout for Group Boxes

You can use fixed layout at the display block level without using it at the group box level, but if you use fixed layout at the group box level, you must also use it at the display block level. Also, if you’re using fixed layout at the group box level, you can use it for group boxes in some display blocks and not others.

Example: Fixed Layout for Display Blocks

In the code sample below we see that the function view element defines this as a fixed layout view with a threshold width of 1000 pixels and a threshold height of 650 pixels. This means the fixed layout will drop into vertical scroll mode if the screen width is less than 1000 pixels or the screen height is less than 650 pixels.

We see CSS classes used to define the layout. The outermost layout container div defines its layout direction as horizontal. This means that its children will be laid out left to right.

Inside that, we see the “Basic Info” display block. It has “star” size, meaning it gets all remaining width left over in this horizontal layout.

The next element in the horizontal layout is a nested layout container div. It has a size of 400, meaning this nested layout will have a width of 400 pixels. This layout defines its direction as vertical, meaning that its children will be laid out top to bottom.

Within the nested vertical layout, we see two display blocks. The “Photo” display block has star size, meaning it will get all the remaining height left over in the vertical layout. The “Deposits” display block has a size of 300, meaning it will be 300 pixels tall.

<jha-function-view jhaTitle="Fixed Layout Example" jhaIsFixedLayout="true"
 jhaFixedLayoutThresholdWidth="1000" jhaFixedLayoutThresholdHeight="650">

    <!-- This is a horizontal layout -->
    <div class="jha-fixed-layout-container-horizontal">

        <!-- This display block gets all remaining width -->
        <jha-display-block jhaTitle="Basic Info" class="jha-fixed-layout-size-star">
        </jha-display-block>

        <!-- This is a nested vertical layout and is 400 pixels wide -->
        <div class="jha-fixed-layout-container-vertical jha-fixed-layout-size-400">

            <!-- This display block gets all remaining height -->
            <jha-display-block jhaTitle="Photo" class="jha-fixed-layout-size-star">
            </jha-display-block>

            <!-- This display block is 300 pixels tall -->
            <jha-display-block jhaTitle="Deposits" class="jha-fixed-layout-size-300">
            </jha-display-block>

        </div>

    </div>

</jha-function-view>

Fixed Layout with Splitters

Any view that uses fixed layout can include splitters between the display blocks. Users can drag splitters to resize the display block layout. Since this is fixed layout, the other elements in the layout resize to accommodate the changes, fully filling the viewport.

To include splitter support in your fixed layout views, add angular-split to your package.json file and use npm install to install its module.

"angular-split": "x.y.z",

Import the AngularSplitModule from angular-split in your app.module.ts.

import { AngularSplitModule } from 'angular-split';
@NgModule({
    ...
    imports: [
        ...
        AngularSplitModule.forRoot(),
        ...
    ],
    ...
})

Here is HTML that recreates the first example above using splitters. See the “Fixed Layout with Splitters” view in the sample app for a more detailed example.

<jha-function-view jhaTitle="Fixed Layout Example" jhaIsFixedLayout="true"
 jhaFixedLayoutThresholdWidth="1000" jhaFixedLayoutThresholdHeight="650">

    <!-- This is a horizontal layout -->
    <as-split unit="pixel" direction="horizontal" gutterSize="7" useTransition="true">

        <!-- This display block gets all remaining width -->
        <as-split-area size="*">
            <jha-display-block jhaTitle="Basic Info">
            </jha-display-block>
        </as-split-area>

        <!-- This area is 400 pixels wide and contains a nested vertical layout -->
        <as-split-area size="400" minSize="200">

            <!-- This is a nested vertical layout -->
            <as-split unit="pixel" direction="vertical" gutterSize="7" useTransition="true">

                <!-- This display block gets all remaining height -->
                <as-split-area size="*">
                    <jha-display-block jhaTitle="Photo">
                    </jha-display-block>
                </as-split-area>

                <!-- This display block is 300 pixels tall -->
                <as-split-area size="300">
                    <jha-display-block jhaTitle="Deposits">
                    </jha-display-block>
                </as-split-area>

            </as-split>

        </as-split-area>

    </as-split>

</jha-function-view>

Component playground

Design

Figma design

Add display block components to the artboard. Size and position them so they take up all available screen width/height in the content area.

See Display Block Design for more information on these components.

Adobe XD design

Add display block components to the artboard. Size and position them so they take up all available screen width/height in the content area.

See Display Block Design for more information on these components.