Fix these issues in your mobile app to make it look more natively

Tips
1

I noticed two common issues in most bubble.io mobile apps.

  1. The capability to pick app elements, and content

2023-02-06 04.53.26
2023-02-06 04.53.26590×1280 46.1 KB

  1. In some kinds of apps, scrolling up or down far can create some nasty gaps - yuck!

2023-02-06 05.18.39
2023-02-06 05.18.39590×1280 66.2 KB

ezgif.com-gif-maker (1)

How to fix:

  1. Add one main element group
  2. Add to this element ID Attribute: {class:[“container”]}
  3. Copy CSS codes
  4. That’s it!

See in the editor
Editor: Bubble-solutions | Bubble Editor

2

Interesting. Thanks. Will check out.

Will this make all texts unselectable? Earlier suggested method in forum was this.

Also, couple of annoyances that I have are:

  1. When we drag the page down, full page automatically refreshes and it is a problem for single page apps. Wonder if there is a way to fix that. (I have had this problem but I haven’t searched forum yet on this, so it is possible there is a solution out there already)
  2. In iOS, when we scroll down the page, the content of page that is moving up starts appearing above the app (the area where battery percentage etc are shown).

Wonder if there are solutions for these two too.

3

Yes. It will. That’s the purpose of the first one.

Can you send a demonstration video for 1,2. I can make a research ?

4

Sure.

For point#1

For point#2

5

Next question from me: Which wrapper did you use?

6

For iOS I built my own wrapper from the guidance in this video that I had shared in my steps of creating iOS app.

For Android I used Trusted Web Activity.

7
  1. Page refreshes in both OC devices? iOS and Android
  2. You need to set up a background color for iOS Status bar. See related articles how to implement that. For example: Change Status Bar Background Color on iOS WebView apps - YouTube
    make sure that code is not deprecated.
8

It happens for sure in Android. In iOS I am not sure. It doesn’t happen in the simulator. I’ll have to check if it happens in real device or not.

Thanks. I tried it. But it didn’t work. Also I don’t think it is a status bar background colour issue. It is just that the header in my page which is on top of the page is at some position, but the content behind it when it is scrolled up, goes up even higher than that and it shows up. In fact I just checked that it even happens in mobile web in Safari. So it is not an app issue actually.

9

can i see your editor? Drop here a link