Reference Application 2.3 - Non-Responsive UI for small screen devices

The current UI (non-legacy UI) of reference application 2.3 is web-responsive i.e. the elements on a page rearrange itself with change in window size. But, the same behavior isn’t found when operating from small screen devices like mobile, tablet, etc.

On viewing a running instance from mobile browser the UI somehow fits inside the screen shrinking the original UI that is observed on web browser on desktop. The UI on mobile isn’t 100% responsive as the UI elements do not rearrange themselves to fit mobile screen. Instead due to shrinking behavior the UI appears really tiny leading to uneasiness in operating from small screen devices.

Is there a way I can accommodate the element-rearrangement behavior observed on desktop browser to mobile browsers too??

@themoonraker13

The UI was not actually designed to be responsive, so the fact that it works with a shrinking window size is actually a lucky accident.

There isn’t an OpenMRS setting that would control this, because the behavior is accidental. I presume that some small tweak to the CSS would give the behavior you want on mobile browsers, but I don’t know what this change is. Maybe there’s a CSS wizard who can look into this?

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Want to try this out, and if it solves your problem on mobile without introducing any side effects then send a pull request, adding this to one of the scss files in uicommons?

The changes are needed to be made in AppUI, UICommons, and ReferenceApplication modules. You’ll have to place the meta tag inside all the gsp/jsp files containing <head> element.

“We are all OpenMRS.”

If you want to see this change happen, then you should verify it works as intended without any side effects, and then send one or more pull requests.

The only issue with the responsive UI so generated after making changes in some of the modules is the tables. Various tables related to search functionality like- find patient record, active visits, etc. are large and cannot be shrink or made responsive as then it shall make the UI poor.

@themoonraker13 can you think of any solution to this? :smile:

Implemented the changes and generated pull requests :sunglasses:

I have just tried out your changes on my phone. The page no longer adjusts to fit the screen. So as a result, i can no longer see some of the page elements like the login button. So i think this makes things worse. :wink:

The problem may persist on some of the pages due to fixed values given for various css style properties like height, width, etc. These changes are need to be done in the css files of specific page. CSS gets generated on building the modules. One needs to edit those files and replace the pixel units with something in percentage (%).

As I’m editing the CSS generated after build and rebuilding the modules, the changes won’t reflect on the code base.

Here’re the screenshots of login screen after including meta tag and fixing few static(fixed) sizing values: Portrait Mode:

Landscape Mode:

@themoonraker13 is this still needing design call time?

No thanks. We certainly don’t need a design call on this.