Obs To Obs flowsheet not vertically scrollable

We have Obs To Obs flowsheet where we do not have a vertical scroll bar to view all the values entered in the expanded view.

Please refer to the screenshot below for patient “P-1” in QA instance. This is with “Sensory Testing” display control on “TB Treatment” dashboard.

To include scroll bar for Obs To Obs flowsheet, we have two approaches.

Approach 1: Change the following styles

.ngdialog-content{ height: 98%; }

to

.ngdialog-content{ height: auto !important; }

Observations: This will make entire dialog box scrollable, however, other dialogs using same class property gets impacted and need to be updated accordingly.

Approach 2: Add the following styles to “obsToObsFlowSheet” section

.dashboard-tabular-obs-section#tabular-obs{

  height: 100%;

  overflow: auto;

  max-height: 550px;

}

Observations: This will make section scrollable and other dialogs will not be impacted.

Approach 3: Added another class to identify Obs To Obs flowsheet dialog

Added the following styles:

.auto-scrollable-dialog .ngdialog-content {

   height: auto!important;

}

Observations: This will make entire dialog box scrollable, and other dialogs using same class property doesn’t gets impacted.

Conclusion: We were thinking to go with Approach 2 , as it is not breaking the existing css behaviour. However, we optimised Approach 1, where we can make dialog box scrollable, without breaking the existing functionality and keep the design responsive. Now we are going with this modified approach which is mentioned as Approach 3

@angshuonline @mksrom @binduak @snehabagri @mohitd @vmalini @praveenad

3 Likes

Not a CSS guru or anything but approach 2 looks fine to me :+1:

As discussed on Bahmni PAT call [8 Jan 2020], we are going with Approach3.