While working on a responsive design project based on SharePoint 2016. I discovered a nice workaround how to remove the “Read more” tag. Since SharePoint 2013 the collapsed task form is an issue to many customers. It hides by default some important fields of a task and the extra click you have to do is not that nice at all.
Task Form Setup
First, I like to show you the basic HTML Setup for the task form is. This makes it easier to see how the CSS works. In the default task list form you have the following simplified HTML code.
<table class="ms-formtable"> <tbody></tbody> <!-- the default fields show in form --> <tbody style="display: none"></tbody> <!-- hidden form fields --> <tbody></tbody> <!-- "show more" toggle --> </table>
The default form of a task list contains three <tbody>
elements. The first section contains the default shown form fields. The second section contains the hidden form fields and the third contains the show more
button.
When a user click on the button a javascript remove the display none display: none
form the second <tbody>
section. After this section have been enabled the button removes itself from the form.
Restore full task form
Now, let’s get our hands dirty and remove the “show more” button as well as restore the full version of the form. Let me first show you the code that does the trick.
/*** Show all tables in form ***/ .ms-formtable tbody { display: table-row-group !important; } /*** Remove 'show more' button ***/ .ms-formtable > tbody:last-child { display: none !important; }
So as mentioned before the surrounding table use the style sheet class ms-formtable
and includes various table bodies. The first statement in the CSS makes all tbody
elements visible by setting the display attribute to table-row-group
.
In general, you should avoid the !important
statement. It means that there is might something wrong in your CSS at all. In this case it is used on purpose. To display the complete form an inline style needs to be overwritten. So this is the only chance you have from an external CSS file.
The second part removes the ‘show more’ button through the pseudo selector last-child
. As mentioned before, this button is included in the last table body inside the .ms-formtable
section of the HTML.
Finally
This trick works in SharePoint 2013 and SharePoint 2016. The benefits of this method:
- No form customisation needed
- CSS is failsafe – no exceptions expected – It works or doesn’t
- Make this customisation available in all task list form
When you upgrade to the modern experience you have to adjust your CSS anyway but this is definitely that won’t bloat your JavaScript.
This blog post was requested by Pieter Kops. If you struggle with similar issues let me know and I’ll take a look.