Fixed width is not really fixed width?

ed727 · 2020-11-10T20:24:04.753Z

Hello – I’m finding that the “fixed width” setting for an element isn’t really fixed width.

Fixed width seems to stop the element from expanding, but it does not stop it from shrinking when the page shrinks.

The Bubble documentation on this has some conflicts. The manual implies that fixed width stops an element from expanding (but not shrinking):

Make this element fixed width – When you check this box, the element will stop stretching/expanding altogether.

But the reference says fixed width prevents an element from expanding or shrinking:

Make this element fixed-width
Check this box if you want the element to remain a fixed dimension when the page is resized. This is equivalent to having a fixed-width page if it is applied to the page element

Can anyone shed any light on this?

cmarchan · 2020-11-11T02:22:29.737Z

Hi @ed727!

Interesting. I have been through many instances where fixing a responsive behaviour takes me hours to fix

I have not come across what you are describing though.

I decided to create a solo group with a fixed width setting and a text element with a 20% min width on a page with its responsiveness activated.

Please review an extract of the bubble manual guide on this below, as well as, two screenshots of the solo group expanded or contracted.

In both cases fixed width worked and the group did not expand nor contract.

image949×730 88.8 KB

image996×835 38.9 KB

image907×806 41.4 KB

Perhaps, you could review all the nested up and nested down elements of your build and check for all of their responsive settings? … (easier said than done … I know!)

ed727 · 2020-11-11T13:54:27.200Z

Thank you for weighing in. I should have clarified that fixed width seems to stop the element from shrinking only until the page width is no longer wide enough to hold the element at its original width. So, if you have an 800px fixed width element, and then shrink the page to less than 800px, the element will now be the page width, not the fixed width.

I tested this on a stand-alone page to confirm the behavior:

Here are some elements on a page that is wider than 800px:

image1120×601 16.6 KB

Now here is the page with the browser window narrowed, and the fixed width elements shrink:

image462×579 16.8 KB

This may be an issue of poor documentation. Fixed with may not really be fixed width. It’s just fixed width as long as the page is wide enough to hold it at the original width, then it is variable width based on page width.

cmarchan · 2020-11-11T15:30:01.852Z

@ed727

I see what you mean. In all scenarios above text is involved. Bubble tries to accomodate for the text to be seen when contracting, even under fixed width.

In the case of the text element try unchecking the box “cut off content if the element is not tall enough” and see what the behaviour is like and what your opinion is about it.

ed727 · 2020-11-11T15:49:18.601Z

Hi, thank you but the fixed width behavior I describe happens on elements and containers generally, including text, buttons and groups.

cmarchan · 2020-11-11T15:51:22.362Z

Yes it most definitely does @ed727

nmagda · 2021-11-17T22:29:36.084Z

Posting my solution because a solution didn’t exist on this thread and I couldn’t find another thread.

Selecting the page itself and setting a minimum width of 99 will prevent all elements on the page from shrinking or changing position when the window is resized because the page itself will not shrink smaller than your original template.

ed727 · 2021-11-18T15:51:22.724Z

Yep, you can stop the page from narrowing, but then the page isn’t responsive and won’t fit on a smaller screen or a mobile screen.

Subsequent to this post I figured out the responsive settings (on what is now the legacy responsive editor). Making an element “fixed width” just indicates what should be narrowed first as the page narrows – the element or the margins around it. If it’s “fixed width” then the margins collapse before the element does. To create padding and make things look decent as pages shrink, you sometimes need to put elements in groups.