Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Resizer

A script which resizes elements to make them have the same height.

last modified: 20/08/2024 11:05:23

Container

Isn't the flex gridding with flex panels doing the job you need?

Before using the resiser, don't forget that flex gridding with flex panels is automatically resizing the panels to have same heights!
Only use resizer when you need to resize contents between them inside a container. If you only need panels to have same heights, just use flex gridding with flex panels instead of resizers using javascript.

Put jsrs-resizerContainer on the container elements you would like to resize and have same height. They have to be on the same row.

Title

Some content

Title

Some content with a button


Children

If you would like to also resize elements whitin the container element with jsrs-resizerContainer class, put jsrs-resizerPart on each part which should be aligned according to the same content of the box next to it.

Title

Some content

Some other content

Very long title to show the resizer

Some content with a button

Some other content with a link

Link


JavaScript

How to trigger the js

Each time you add HTML with resizer part to the page, you have to use this JS function: inception.equalize(CONTEXT);

CONTEXT refers to document or html element parent.