How to Hide Column Name in List Grouped View?

This is a real-world scenario where our client wanted to hide the column-name in list grouped-view.

image

We need to hide the portion highlighted in yellow.

How to hide it?

As you know, the web part does not have any pre-defined property to hide the column name & the colon (:).

We can use JavaScript Or CSS for hiding it.  I am opting the second option here.

We can use SharePoint Designer to edit the page Or use content editor web part to attach the CSS to the page.  I am using the second option here.

The Trick

Open the site in Internet Explorer & Press the F12 button (Developer Tools)

image

Drag the pointer over column name & find the class name.  Here it is ms-gb.  We can use the column name to hide the column.

Solution

Please follow the steps below.

Step 1: Open the list page

image

Step 2: Edit the page

Edit the page & Insert Content Editor web part.

image

Click on the highlighted area & then from toolbar choose HTML > Edit HTML Source.

image

Step 3: Paste Code

Paste the following code into the HTML Editor.

<style>

.ms-gb a:first-child{
  display:block;
  visibility:hidden;
}

.ms-gb a:link > img {
  display:inline;
  visibility:visible;
  position:relative;
  top:13px;
  right:5px;
}

</style>

image

The first block of CSS hides class first child of class: ms-gb.

The second block of CSS pulls the image (+ sign) up.

For hiding the list header, you can insert the following code too:

.ms-viewheadertr

{

display:none;

}

Please note that the visibility:hidden makes the control invisible, but spaces will be allocated.  The display:none makes the control invisible without adding spaces.

Step 4: Test the code

Save the changes to web part, page & Refresh the page.

You can see the following result.

image

Summary

In this article we have explored how to hide the Column Name from List grouped-view.

5 thoughts on “How to Hide Column Name in List Grouped View?

  1. John says:

    Okay – finally got this working on my Sharepoint 2010 site. Thanks for the start! Had to rewrite a bit to this:


    .ms-viewheadertr
    {
    display:none;
    }
    .ms-gb a:link > img {
    display:inline;
    visibility:visible;
    position:relative;
    top:13px;
    right:5px;
    }
    .ms-listviewtable td.ms-gb > a:first-child
    {
    display:block; visibility:hidden
    }

    1. John says:

      oops – add a “;” after that last visibility:hidden

  2. jeanpaulva says:

    Thank You John for the update. :)

  3. Tiac says:

    I have two groups. I order the list by the first group. Is it now possible to hide the hole first group?

    1. jeanpaulva says:

      Yes. It is possible.

Leave a Reply to Tiac Cancel reply

Your email address will not be published. Required fields are marked *