Unable to click on menu/back button when in full screen

Unable to click on menu/back button when in full screen

  

Hey guys!

Been developing my custom calendar application. It is a mobile app which we also hope to use on the desktop. On the desktop, at a non fullscreen width, I am able to click the menu/back button. The app menu container does not get in the way.

However, once i increase the width, the view expands and app menu container covers the button.

I'm thinking I could just try to shift the app menu further left but i'm not sure if that will interfere with other behaviour.

Also if I'm developing this mobile app to also be accessed from a desktop, are there any considerations to be made? eg. LocalStorage, etc


Thanks a lot for your time!


Best,

Barnett

Hello Barnett,

The problem with the menu container is that it is increasing relatively to the size of the screen (it must have a width that is a % of the size of the screen).
You need to investigate the CSS being applied to correct it (change the CSS to avoid the problem).

Regarding the considerations, the first consideration is that Mobile App were not meant to be used in Desktop. But they are being, so, you have to test it a lot.
For local storage, you have a big limitation right now: Chrome. This is the only browser where you can use this application, because of the database engine chosen.

Personally, I understand that the only reason to do this is to have an "easy" offline capability to web application. But I don't think this is a good approach for a web application...

Cheers.

Eduardo Jauch wrote:

Hello Barnett,

The problem with the menu container is that it is increasing relatively to the size of the screen (it must have a width that is a % of the size of the screen).
You need to investigate the CSS being applied to correct it (change the CSS to avoid the problem).

Regarding the considerations, the first consideration is that Mobile App were not meant to be used in Desktop. But they are being, so, you have to test it a lot.
For local storage, you have a big limitation right now: Chrome. This is the only browser where you can use this application, because of the database engine chosen.

Personally, I understand that the only reason to do this is to have an "easy" offline capability to web application. But I don't think this is a good approach for a web application...

Cheers.

Hey Eduardo,

I'll give the CSS a go.

Would you suggest that I create a separate web application to work the Core Module of my app alongside the mobile app? Thank you.

Best,

Barnett


Found the solution with Eduardo's idea of looking at the CSS

Turns out the container was only translated 97% of the viewport's length left, meaning a little bit of it remained on screen.

Add the highlighted code to your CSS stylesheet to overwrite the mobile patterns CSS and it will be fixed. Not sure if this causes any unwanted consequences. In my testing, it has not.

Best,

Barnett