Article
0 comment

Remove “Read more” from SharePoint Forms through CSS

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 intended by Microsoft.

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 &lt;tbody&gt; 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 &lt;tbody&gt; 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.

Restored and improved task form

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.

 

Leave a Reply

Required fields are marked *.


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