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.
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.
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.
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.
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.
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.
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.
Thank you for your guidance here on making OOTB List forms responsive. Love it!
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!
Thank you Tony for the addition. That is something I definitly have in my toolset but forgot to mention.
/Stefan
Please take a look at SPARK Forms Builder, as an alternative of InfoPath, @ http://www.itlaq.com/ITLAQ_Pages/Pages/Spark.aspx
Hi Stefan,
The Github link doesn’t work anymore 🙁
Do you still have the code?
Thanks if you can share
For me the links still works – https://github.com/StfBauer/ResponsiveSharePoint
Thanks Stefan googled it earlier and i found it