Advice needed: Mobile Preview not as expected - how to debug?

In the mobile preview in the Backendless iPhone App as well as in the Safari and Chrome Browser on the iPhone a pure text field without any additional CSS is missing. It is not an iPhone App but a Website.
I have no experience how to debug this with your mobile App and look for advice.

Any idea is appreciated.

Hello, @Jorg_Beyer.

You can still add logs that you will track with the Real-Time Database.
Additionally, you might display alerts that you will see even in the application itself.

Best Regards, Nikita.

Hi Jörg,

When you open your page in a browser and open the browser’s dev tools, you can switch the page to the mobile view mode as shown below:

This should give you an option to debug the page as it would be rendered on a specific mobile device.

Regards,
Mark

Thanks for that idea. Unfortunately, this changes only dimensions. I have used this already. But my “problem” is only on the actual device: in backendless mobile app, in chrome and safari on the iPhone. And it is only a single text field that is not showing. I try to find out whether I use some CSS. I think I have to go with displaying some data as an alert as I have never done logging before.

Hello @Jorg_Beyer ,

If you’ve already published the container, make sure you republish it after making changes.
Also, make sure the text box has text in it, otherwise it won’t be displayed.
If the above does not help, please provide us with your Application ID so we can investigate the issue further.

Regards,
Nazar

Hi Nazar,
I am still on Springboard plan and have not published anything. Where can I find CSS media entries for the Backendless Modern Light Theme? I guess it must have something to do with CSS.
Thank you for your support.

Hi @Jorg_Beyer

please help us to reproduce your issue, can you provide:

  1. your AppId
  2. container/page names
  3. link to the app preview
  4. any additional info…

Regards, Vlad

  1. A2090C1B-936C-A876-FF32-277A55A60700
  2. de/swag
    text field progressMsg
  3. if you call the Browser Page on an iPhone (Chrome or Safari)
  4. the progressMsg field disappears after the first click on a tile and a solution proposal - it works on any resolution on a laptop

Does that help?

I just tried and seems like it works well for me

Please enter something in the input field and press enter. Then something different should appear in that field indicated by the red arrow.

Hello @Jorg_Beyer

Could you record a demonstration video for us of how this works for you? As I am also unable to reproduce the problem.

Regards,
Inna

It is only effective on the iPhone. A demo video would not help because you would only see a blank text field after entering something into the input field and clicking enter/ok.

This is the “video” :wink: This error can be found on an iPhone. Do you have an idea what this could cause this error? I have an idea where this error is located (near …), but why this is an error on an iPhone only is a mystery to me.

I tried with the filled input and still do see any errors, perhaps there are extra steps to reach the error

Btw, if the error comes from a …/bundle.js (your codeless logic) file it means there is nothing to do with CSS (styles) the issue is definitely in the JS code

is there any chance to create a new page with minimum logic/components to reproduce the problem, it could help us to help to find what exactly cause the issue

I found the code snippet that causes the error. But, there is no error thrown in the desktop browser nor the android phone browser. Just the iPhone was affected. This is irritating to me.

We can close this thread.

1 Like