Article
7 comments

Responsive List Forms – Don’t panic it’s just a table

When it comes to responsive web design and tables some people might get a panic. In general there is nothing bad about tables. Just treat them right.

This time I like to show how to make list forms responsive. Actually, this sound harder than it really is just because the form is rendered in a table. A table is as good and flexible as any other HTML element and can be transformed into any other form.

DON'T PANIC

 

A table is a table

The web standard and browser have a default way how to deal those elements. Take a closer look at all the table elements.

  • <table>       is defined through the css value ‘display: table’.
  • <tr>             or table row is defined through the css value ‘display: table-row’
  • <td>, <th> is defined through the css value ‘display: table-cell’

So when you really like to transform the table all that needs to be done to reassign the display property to value like block or inline-block. Next time you have to deal with a table just remember a table is nothing more than a collection of div elements.

How to transform the table

First, let’s look a pattern how to build a form. There are basically two recommended patterns that I like to show you.

Label beside field

The quickest way to fill out a form is when the label and the input field are side by side. Forms built this way are easy to scan for the user and the most preferable way when it comes to usability.

list-form-label-beside-field

Labels and fields side by side

The biggest disadvantage is that forms built this way is that they need a lot of space. So there have limited use in mobile scenarios.

Label above the field

This form is recommended when only limited space is available. Forms built with this pattern are narrower, which makes it the perfect candidate for mobile use.

list-form-field-on-top

Labels on top of the fields

One disadvantage of this pattern is that firms will become twice a large when labels are beside the field. Labels are harder to scan for your user because they look more disconnected from the fields.

In case of SharePoint

The default design of our list forms is label beside the field and use the best approach for desktop users. With some simple CSS statements we can transform this to the ‘label above field’ pattern. To demonstrate this I created a custom list form with some additional columns.

Default example of SharePoint List form

Default example of SharePoint List form

The table

First the table element needs to be transformed to a regular div element. The main table of any SharePoint form as the class .ms-formtable assigned.

.ms-formtable {
    display: block;
}

From now on this table is not included in the list form anymore. Well, it is still there, but behave differently.

The table rows

So a table row has the display value table-row assigned. Through setting the display to block another classical table element was removed form SharePoint.

.ms-formtable tr{
    display: block;
}

This was easy and until now the original list form haven’t changed at all.

The table cells

The labels of the list form are stored in a table cell that has the css class ‘.ms-formlabel’ assigned. To put the label above the fields again all that needs to be done is to assign display: block to this table cell.

.ms-formlabel{
    display: block;
}

Last but not least the .ms-formbody, the element contains all input fields and controls, display: block needs to be assigned too.

.ms-formbody{
    display: block;
}

The list form is now more mobile friendly without any deep customization.

List form after improvements

List form after improvements

The input fields

The last thing thats needed to be fixed are the input fields. Some of those fields have a fixed with assigned and those values needs to be changed to match the size of a mobile device.

Responsive List Form after final improvements

Responsive List Form after final improvements

This will be fixed by the following style definitions.

.ms-formbody {
    box-sizing: border-box;
    display: block;
    width: auto !important;
    max-width: 280px;
    padding: 0 0 0.5em 0;
}

.ms-formbody tr {
    display: block;
}
// Fixes of fields types
.ms-formbody .ms-rtestate-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0px;
}

.ms-formbody .sp-peoplepicker-topLevel {
    width: auto;
}

.ms-formbody input[type="radio"] {
    width: 24px;
    height: 24px;
}

.ms-formbody .ms-long {
    box-sizing: border-box;
    width: 100%;
    min-width: 270px;
}

 

Final thoughts

The last thing that I don’t show in this article explicitly is to wrap the code in a media query. That is up to you. In the source code on git hub I have done that for you. I hope I have shown you that in some cases table constructs are not that frightening and with the right technique they can be easily enhanced for use in responsive scenarios. A table is not a table if you like to let it look different.

Like to know more about form labeling patterns? Checkout: Definitive guide to form label positioning.

 

7 Comments

  1. Nice simple CSS. I did notice that there are <nobr> tags wrapping the column titles which makes the form unresponsive when you have long column names. Adding nobr{white-space: normal;} to a media query seemed to do the trick!

    Reply

    • Thank you Tony for the addition. That is something I definitly have in my toolset but forgot to mention.

      /Stefan

      Reply

  2. Hi Stefan,
    The Github link doesn’t work anymore 🙁
    Do you still have the code?
    Thanks if you can share

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.