Responsiveness

1. Responsive modes

By default, the accordion will scale proportionally in order to fit the bounds of the window or of the container it was added to. This is called Auto responsiveness, and it's useful when you don't have CSS knowledge, to be able to customize the responsive behavior yourself. In this responsive mode, the accordion will resize everything in it, like layers or HTML content, proportionally.

If you have CSS knowledge, it's recommended to use Custom responsiveness, by setting theResponsive Mode setting to Custom and then use CSS media queries to define different text sizes or to hide certain elements when the accordion becomes smaller, ensuring that all content remains readable without having to zoom in.

In both cases, the Width and Height settings can be set to fixed values, not necessarily percentage values, as the accordion will still scale down and properly. Also, the Width and Height will represent the maximum width and height that the accordion will have.

When you use Auto responsiveness, the Width and Height need to be set to fixed values. Setting them to percentages would not allow the accordion to properly calculate how it needs to resize itself.

2. Aspect ratio

If you want to set the Width and/or Height to a percentage value, like 100%, the accordion will not be able to calculate the aspect ratio that it needs to maintain while it's being resized (as it does when the Width and Height are set to fixed values). For example, if the Width is set to 960 and the Height is set to 400, that results in an aspect ratio of 2.4 (960/400). However, as you can guess, if either the Width or Height is a percentage, the division operation can't be done. To overcome this, you need to use theAspect Ratio setting, for manually setting the aspect ratio that the accordion needs to maintain while it's resizing.

By default, Aspect Ratio is set to -1, which indicates that the aspect ratio of the accordion will be automatically calculated based on the Width and Height specified.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk