How to stop a multistate box exceeding size of container

Ask the community
1

How to stop a multistate box exceeding size of container

Product:
Wix studio

What are you trying to achieve:
I have a container that has a max height set with a multistate box in it. When I scale the workspace to a higher resolution the container gets no larger than the max height however the multistate box continues to grow outside of the container

The container is set as ‘advanced settings’ for size as I want to use it across breakpoints.

Thanks in advance!

example here…(lower right container) https://jarrod668.wixstudio.com/my-site-3?rc=test-site

2

is the multistate box docked to the top of the container ?

3

Hi, @Jarrod_f !!

Try dropping a multi-state box, smaller than the container, on top of the container. Then click the multi-state box and press the stretch button that appears in the top right corner. Doesn’t this let it fit perfectly to the size of the container? :upside_down_face:

4

Thanks for the replies,

I thought I had tried the above but have been through a lot of things trying to get it to work.

https://jarrod668.wixstudio.com/my-site-3?rc=test-site

Shows the same container used in all scenarios. One with nothing in, one with box docked to top, one with stretched. Both displaying the same problem…

Is there any other scaling that might be overriding the container limit?

Thanks,

Jarrod

I’ve tried constraining the multistate box containers to the max height of the parent container. This seems to work for the multistate boxes however the multistate item itself still scales outside of the parent container, even if overflow is set to hide

5

Hi, @Jarrod_f !!

There may be a lower limit set on the height of the multi-state box, which could prevent it from being resized below a certain point. As a result, it might overflow from the parent container.

When you place a multi-state box on the page, you probably notice that there is no draggable handle to adjust its height directly. However, by embedding it within a container and resizing the container instead, you can gain a certain level of flexibility.

If you increase the height of the outer container, you can also increase the height of the multi-state box. Still, it seems that the height cannot be reduced beyond a specific minimum. When you try to make it smaller, the action might be rejected.

This height restriction could also be affecting your current situation. Since I don’t fully understand your setup, I may be off the mark, but finding a way to bypass this height limitation for multi-state boxes seems challenging at the moment. Hopefully, someone else has a workaround for this issue. :upside_down_face:

6

Thanks for the replies!

Still have the problem which is:-

I create a container which has advanced size settings set and a maximum height specified.
Then put a multistate box within the container and stretch it to fill the container.

When I expand the workspace (or test site) the max height on the container properly limits the height, however the multistate box (whose max height cannot be set) expands out of the container.

As I’m tight on time, and think this might be a ‘feature’, my current work around is to match the multistate box child containers to the container max height. This stops the children (in my case images) from expanding out of the container. The multistate box still expands out of the container however with the background set to none it is not visible. Not ideal but it does work.

Any other suggestions/solutions welcome!

Thanks again!