Chapters
English
github
DocsBlog
fontcolor_theme
Desktop UI

Adaptive Container

Adaptive container is a component that allows you to use flex box layout with content that automatically hides (display: none) children that overflow the available space.

Every children with the class dui-adaptive-fallback will be made visible once at least one of the other children is hidden. This allows you to create a button that opens a dropdown with the hidden buttons.

If you want to customize the dropdown, you can define as children your own dui-dropdown and define in it an container element with [duiAdaptiveHiddenContainer] directive. This places the hidden elements automatically into this container element.

PreviewHTML
Button 1Big Button 2checkButton 4Button 5
Resize the areas to see how the adaptive container adjusts.
Row
Row Reverse
Column
Column ReversecheckStretch ButtonscheckAnimate

API <dui-adaptive-container>(source)

searchclear

The AdaptiveContainerComponent is a flexible container that arranges its child elements in a row or column, depending on the specified direction. It uses flexbox to manage the layout and automatically hides elements that overflow the container's bounds.

The container uses flex-wrap: nowrap to detect overflow and hides elements (display: none) that do not fit.

Overflowing elements can be moved to a hidden container automatically, which per default is put into a dropdown that can be opened to show the hidden elements.

<dui-adaptive-container>
    <dui-button>Button 1</dui-button>
    <dui-button>Button 2</dui-button>
    <dui-button>Button 3</dui-button>
    <dui-button>Button 4</dui-button>
</dui-adaptive-container>
Name
Description 
@Input() direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
@Input() dropdownClass?: string
The class to apply to the dropdown container. 
@Input() element?: Element | ElementRef<any>
Per default, the dui-adaptive-container will be made adaptive. Pass an Element or ElementRef to use a different element as the container. 
@Output() showElements?: Element[]
Trigger for elements that were hidden and are now shown again. 
@Output() visibilityChange?: Element[]
Triggers for elements that are now hidden. 
dropdown: Signal<DropdownComponent>
hiddenContainer: WritableSignal<HTMLElement>
The elements that are currently hidden, either currently hidden (display: none) or moved to the hidden container. 
hiddenElements: WritableSignal<HTMLElement[]>
registerHiddenContainer(hiddenContainer: HTMLElement): void
unregisterHiddenContainer(hiddenContainer: HTMLElement): void
update(): void

API [duiAdaptiveHiddenContainer](source)

Directive to mark an element as a hidden container for the adaptive container. If defined, adaptive-container uses this element to place hidden elements into it.

<dui-adaptive-container>
    <dui-button>Button 1</dui-button>
    <dui-button>Button 2</dui-button>
    <dui-dropdown>
      <div *dropdownContainer duiAdaptiveHiddenContainer></ng-container>
    </dui-dropdown>
</dui-adaptive-container>