Screen only showing 3/4 of app


#1

So I have a web view page and install my url this is for android.

And the preview doesn’t fill the screen?

This was built with Bubble and responsive works beautifully on my android device and my pc.

Any ideas?


#2

Hi there, if you mean the web view isn’t filling the page when you run your app in the simulator you can try using proportional constraints to fill the page - you can do this in the Web View - Properties > Constraints.


#3

Thanks for quick response @sue I will check it out now.

I was under the impression if I filled the virtual phone in editor with a web view that it would fill the space in any phone after that? Responsive? I can’t have a scroll bar on screen that would look weird.


#4

The screen size of the canvas won’t necessarily match the screen size of any virtual or physical device your app runs on, so to create layouts that adapt to the different screen sizes you need to use proportional constraints - this works differently on mobile vs the web.


#5

Yes it was proportional constraints thank you!:grin:


#6

Hi all, I have the same problem but the “proportional constraints” option seems not to be available anymore. In my dropsource Webview options, I only have “left”, “middle” or “right” alignment option (respectively top, middle, bottom for vertical alignment). Do you know what should I do to adjust my “fixed” webview size to the size of the screen please with the current version of dropsource? Thanks a lot for your answer if you have time :slight_smile:


#7

Hi @nicolas, in the new Constraints section you can still use proportional values, they’re referred to as relative now, just click the little % percentage sign you see next to the constraint values.

If you hover over a constraint option you’ll see that each one allows you to specify size and position using a combination of the available values.

To make your element fill the available space you can use the center option you see in both horizontal and vertical sections, setting left, right, top, and bottom to zero. Alternatively you can use a relative width value of 100% and zero on either the left or right (for horizontal - for vertical you’d set a 100% height and zero top or bottom).

More on the constraint options in our help center: