responsive design

Input-fields can easily be defined for responsive design:

        $("#reguserForm")

        .append('<div />', {

            class: "ui-field-contain"

        }).append($('<input />', {

            type: "password",

            id: "reguserpassword1",

            disabled: false

        }).append($('<label/>', {

            for: 'reguserpassword1',

            text: "Passwort (Kontrolleingabe)"

        })));

This field container approach allows a compact coding, on a small screen the label is positioned above the input field, on a wider screen the label is positioned aside of the input field.

Several input fields with their labels can be aggregated under one field container.

So far also tables have been used:

     $("<table />", {

            id: tblid,

            width: "100%",

            "data-role": "table",

            class: "ui-responsive",

            css: {

                "table-layout": "fixed"

            }

        }).appendTo("#" + contid);

The definition is easy, thead and tbody have to be used, otherwise they are added automatically. Then the directive class: "ui-responsive" is sufficient for the responsive layout:

• on wider screens the tables are shown "normally"
• on smaller screnns the tables are converted, every column of a row, that means every cell of the table gets an own row with a label above the input or output field of the cell.

The "table-layout": "fixed" is necessary for the definition on the cell level:

             css: {

                "word-wrap": "break-word"

            }

This makes sure that the layout is not changed by the content of the cells and that the content of a cell is shown completely.

The header and the footer are fixed with "data-position": "fixed" and that is enough to keep header and footer in their place, when the screen height resp. window-height are changed.

But a change in the content of header and footer can cause that the height of the header or the footer changes. This does not automatically lead to a recalculation and new positioning of the content. That' why custom code has been developed to do the resizing of the content. That can not be done easily, instead the page parameters have to be changed, because the header-height is the page padding-top and the footer-height is the padding-bottom of the page.

That was the view back, now to the next challenges:

• example registration page
• the content is a sequence of input fields and checkboxes and a button
• vertical alignment is sufficient
• on a wider screen the input-fields are too wide - that looks ugly
• using max-width on the content-level and center on the page level gives a nicer layout

The solution for the content is quite easy - the yellow color is just for testing and demonstration:

css: {
    "max-width": "750px",
    "background-color": "yellow",
    "margin-left": "auto",
    "margin-right": "auto"

}

That looks not bad, when the content should be displayed with maximum width and the screen is very large, a grid layout with two columns can be used. In case of the diary:

• first grid cell: ratings and report
• second grid cell: income, expenses and work-time

this will be applied in the next step