Maximum Dimensions Stack

Maximum Dimension Stack will set the maximum width and/or height of a Stack. So, anything inside will not expand any further than this. This is very interesting for responsive themes where you don't want something to expand the whole size because its layout only works fine up to a specific width.
Take a look a the example of the light boxed text and image here. Example IV shows an image and a corresponding text Stack. On small screens everything is scaling fine. But as soon you are using desktop browsers the text is expanding very far on the x-axis. The image, which width is a maximum of 600px, will not expand any more. You could provide a bigger image, so that it will fill the whole lightbox. But if you want to show only small previews on purpose, this is not an option and you should limit the dimensions.

Screenshots

Examples

Example I: Maximum Width set to 300px
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Example II: Maximum Width set to 33%
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Example III: Maximum Width set to 50% and Maximum Height set to 100px
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Example IV: Maximum Height set to 100px
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Example V:
Use a lightbox to bring up a 600px image and a text. On larger screens the width is limited because you may want to have only a small preview of the image while the text should not get wider than the image itself
Try resizing your browser to a very small width and open the link. Then maximize the browser's width and click the link again:

click me (with maximum dimension)
click me (without maximum dimension)

Settings

    Max Width: amount of list items which can be filtered
    Max Height: each list of filterable items must have a unique id in order to allow two or more of these lists on one page
    React on outer Stack: Normally only the content inside of the Stack will get the dimensional constraints. Activating this option you can achieve this effect even on the outer Stack which is normally controlled using the layout tab.
    React in edit mode: You can check this option to have the width and height effect even in edit mode

Infos and Requirements

Rapidweaver
Rapidweaver 5/6/7
Stacks 2 only
Stacks 2 / 3
Responsive
Compatible to
responsive themes

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox
Stacks Image 6478
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 6486
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.