Background and horizontal scrolling in fixed width

Need help
1

Hi,

I´m playing a bit with the layouts because I want my app not to be responsive but with a colored background.

So my first way to do that is having the responsive engine active and in the page I put a group with fixed width but what happens if I stretch the page is that you cannot even scroll to the left or the right of the page.

This is the example: https://mynewtestapp.bubbleapps.io/version-test/facturas/sample:custom.invoice?debug_mode=true

The second way is to set the whole page as a fixed width and then when stretching the page you have the horizontal scroll available so you can see everything in the page but then you cannot set a background for the whole page that is outside the element layout.

Here is the example for that: https://mynewtestapp.bubbleapps.io/version-test/clientes/sample:custom.customer?debug_mode=true

And here is an image of a layout example that I want to achieve:

mylayout.png1230×727 62.8 KB

Thanks a lot everyone.

2

What is your problem? What is your end-goal?

3

I want my app to be non responsive and also I want to have a background that covers the whole page with a flat color but with a page set up as “fixed width” is not possible.

And if you go with the responsive engine and make the groups fixed when reducing the width of the page you are not able to see the whole content because you cannot scroll to see it.

I don´t mind using the responsive engine and there insert a group with a fixed layout but the problem is that when you resize the app it does not show all the elements because you cannot scroll horizontally.

Maybe it´s a bug? @emmanuel

What I want to achieve is a layout like in the image above.

Thanks.

4

I’m not 100% with you. Why would you want to scroll left or right if everything is in the center of the page?

5

Maybe it’s just me but when I resize the page to an smaller width some elements are hidden.

Try to resize the https://mynewtestapp.bubbleapps.io/version-test/facturas/sample:custom.invoice?debug_mode=true page and see what happens.

I guess you mean with responsive engine active and a group with fixed layout, right?

Check this screenshots:

full page.png1033×499 18.5 KB

In the first one you can see as is the full size it shows everything but in the second one as it´s been resized some content is not shown.

6

Is this link for responsive or not responsive.
Not responsive will cut the elements of when the screen gets smaller.
Responsive will shrink them, depending on settings, until the minimum width has been reached. Thereafter it will start cutting the elements of. It’s difficult to say without seeing your settings

7

This link is with the responsive engine active and then a group inside with a fixed width.

8

It looks like it has come to the fixed group’s edges and now starts to hide the elements.

9

Will you know how can I solve this @raymond ? I want the users to see everything on the page.

10

Your group can’t be fixed width you must allow it to get smaller. The elements within the group will also get smaller but you can set them either to fixed width or minimum width that you want to allow them to shrink.

You will see that your elements will then start moving underneath each other from right to left

11

But here Where is the 'Enable Responsive' option @emmanuel said that a fixed group should be working same as having the fixed layout on a page and it does not at least in my app.

Does it work the same for you?

I need everything on the page to be fixed so I played with the fixed layout but I need the background from edge to edge.

Thanks.

12

Yes they do but if you make the page smaller it will cut the elements of just like a non responsive page. If you want the elements to show when the page is smaller you will have to make it responsive and not have the groups as fixed

13

You´re right but with the non responsive page you can scroll horizontally to see the elements.

Or with a fixed group you can horizontally scroll? For me it does not work but maybe it does for you.

Thanks @raymond.

14

No problem. It comes down to personal design and functionality preferences.

15

@emmanuel could you make the fixed group to work as the non responsive page? I mean in non responsive page when you resize the page you can scroll horizontally to the hidden elements but with a fixed group it´s not possible.

Or have the edge to edge background in the browser?

Thanks.

16

It’s a design choice we’ve made to make the groups not go beyond the screen width, I think it’s better that way.

2 Likes