https://ikos-charging.bubbleapps.io/version-test/choosecharger?debug_mode=true
I’m trying to hack together this proof-of-concept app and learning Bubble as I go. I want to make it look more like a native app on iOS, by removing the search bar and scroll bars from the browser when the page loads.
I’ve installed CSS Tools and added a work flow - When page is loaded > Add/Edit Head Tags with the following CSS
<style>
* {
outline:none !important;
}
</style>
I have three pages: index allows the user to register or sign in then workflow navigates to page 2 for another action, then page 3 for a further action. I’ve done this same CSS thing on all of them, but only the landing page (index) appears without the search bar. (I realise it would be more efficient to show/hide elements in groups rather than do page navigation, but I’m too far down the line to change it now).
I’m clearly doing something stupid - but I don’t know what. Any clues?
Thanks.
Unlikely! I’m sure a 1-on-1 coaching session would set you right!
Not at all. Have you ticked this in your settings?
Thanks for the reply, Jared - I imagine 1:1 would help a lot 
Yes, Hide Safari UI and Prevent User From Zooming are ticked in General Settings for the app - my landing page (index) CSS modification works perfectly, but when workflow navigates to the subsequent pages, they both have the search bar displayed.
For me this seems to only affect the index. Case in point
Which means I need to keep my entire 1 page app on that index page to keep the beautiful styling
I understand the remove scrollbars…there are some threads on the forum with the CSS for that or for customizing the scrollbar look as well…
What is the search bar?
Sorry. I probably misread that earlier. I thought he was referencing these elements
These still appear even after ticking the box mentioned above
Thanks for the replies - Jared, I was referring to those elements. A friend of mine pointed me towards the CSS tools, believing that they were used to remove the search bar and nav buttons - however it may well be that the “remove Apple UI elements” are actually what work and CSS tools does nothing…
Question still remains - is there a way to perform the same action on “non index” pages, or is it just better if I refactor my app to be all on the one index page, without any child pages…?
Have you done it successfully on the index page?
If so, have you tested it on another page?
If so, was it successful as well?
Yes - successful on the Index page.
Same settings and actions on “non-Index” pages - doesn’t work.
Spent the morning playing with this - looked at using
the SEO/meta tags
the radio buttons “hide safari UI components”
CSS Tools plugin to edit the CSS style
Edit HTML tags on page load
All of these things ONLY work when the page is loaded from a “bookmark” on the user’s home screen - which naturally would be the index page.
I tried navigating to a child page in Safari then bookmarking that page to the homescreen, and indeed the UI components are removed when opened from the bookmark.
So…it seems there may actually be no way to remove the UI components from a child page which is loaded by navigation from an index page…unless anyone has any really bright ideas!
