?Undocumented? "trick" for getting layout based forms to look right

(Ralf Lukner MD PhD) #1

I have been working with layout-based-forms quite a bit and there is something that I did not realize until somewhat recently.

To get the labels and datafields to “look right” (not wrapped to next line, seemingly randomly scattered), I have started doing the following:

  1. In the “Layout properties” dialog, pick a number of columns (“Layout Columns”) (say 3 for three labels and data fields maximum per row).

  2. Then, in the first field of each row, choose a number of fields and labels that will be in that particular row (say 1 and 1, 2 and 2, or 3 and 3) and put these two numbers, respectively, into the Label Cols and Data Cols field of that row (make the two numbers the same).

  3. Then, in the second, third, etc fields, just use 0 and 0, respectively for the Label and Data Cols fields. This will cause each row to have the expected number of rows with the expected number of datafield labels and datafield entry boxes.

  4. Repeat for subsequent rows (the first field will always have a Label Cols and Data Cols that are the same and represent the number of labels and datafields in that row.

Thus, setting a Layout Properties like this …


With a layout configuration like this …


Will look something like this in the visit form:

I cannot think of a reason to have the Label Cols and Data Cols to be a different number with the above scheme.

Hope this helps someone like me.

(Ralf Lukner MD PhD) #2

Here is an additional tip on getting Layout Based Forms to “look right” (have as close to proper/expected field layout and alignment as possible). Sometimes despite doing the above in the previous message, the fields will still wrap to the next page (separated from their label or the “ADD” button on lists to which items can be added). This seems to be especially true when there are long fields (such as Language, for example). In this case, consider reducing the number of Layout Columns in Layout Properties to 2 (or less). This seems to correct the layout issue with lengthy fields for me. In some cases, I have had to reduce the number of layout columns to 2 and put each field on its own line (Label Cols = 1, Data Cols = 1) for some of the groups.

(Alan Smith) #3

Hi @Ralf_Lukner , we seem to be looking at the same issue. (Also, try looking at ‘tips’ - 2nd option from the right in the menu line, under edit layout).

Made some progress - I’ve got the right number of fields per line.
But in the default Demographics view it looks pretty average, as per uploaded snip below… the fields are minimum size & all strung together, and only the 1st label per line looks like a label.

If I click on the ‘edit’ button, it looks pretty good. So why not the display?
I could probably fiddle with CSS - but surely someone knows what I’m doing wrong/missing?

(Ralf Lukner MD PhD) #4

I noticed the same thing. It prints nice and looks good on edit but the display is strung together… not so nice. I think that’s just the way it works right now. CSS party time!

(Jerry P) #5

Hi Guys,
While it is true that row and column settings in layouts editor may be massaged for form display in encounters, the reality is that form layout appearance greatly relies on code residing in interface/forms/LBF. This is really where you might want to look for better views via stylings. Also don’t forget that changes in encounter views must also be made to report and printable.

All these stylings and formatting were never completely gone through after we converted to bootstrap.

Demographics stylings are another story and are mostly hard coded.