SharePoint Responsive List – Mobile View Plus Headers

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

In a previous post I showed how to make a SharePoint discussion board list more mobile friendly by using only CSS.  That approach hides the list header which works fine for a discussion board but not for any SharePoint list.  The below solution tries to overcome this problem by adding a little bit of JavaScript (jQuery).

ResponsiveListwr

CSS

.mob-header
{
display: none;
font-weight: bold!Important;
float: left;
padding-right: 1em;
vertical-align: top;
margin-top: -2px;
width: 100px;
font-size: .9em;
}
@media screen and (max-width: 450px)
{
.mob-header
{
display:inline-block;
}
table.ms-listviewtable > tbody > tr
{
padding: 10px;
}
table.ms-listviewtable > tbody > tr > td
{
display: block;
text-align: left;
border: none!important;
width: 100%; /* IE8 */
float: left; /* IE8 */
}
table.ms-listviewtable > tbody > tr > td.ms-vb2 > a
{
font-size: 1.2em;
font-weight: bold;
}
table.ms-listviewtable tr.s4-itm-hover > td, table.ms-listviewtable tr.ms-itmhover:hover > td, tr.s4-itm-selected > td, tr.s4-itm-selected:hover > td
{
border: none;
}
table.ms-listviewtable .ms-viewheadertr, table.ms-listviewtable tbody tr td.ms-vb-firstCell
{
display: none;
}
}

JavaScript

(function($)
{
var $sptableList = $("table.ms-listviewtable > tbody");
var $headers = $sptableList.find("> tr.ms-viewheadertr > th");
var $items = $sptableList.find("> tr.ms-itmhover");
$items.each(function() {
$item = $(this);
var counter = 0;
$cols = $item.find(" > td");
$cols.each(function() {
$mobileHeader = $("<div class='mob-header'></div>");
$mobileHeader.append($($headers[counter]).html());
$(this).prepend($mobileHeader);
counter++;
});
});
}(jQuery));
facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
Posted in SharePoint 2010, SharePoint 2013 Tagged with: , ,
11 comments on “SharePoint Responsive List – Mobile View Plus Headers
  1. James says:

    I tried using this solution but it did not work. Is it compatible with Sharepoint 2013? The table headers are not showing.

  2. James, apologies for the really delayed response. This solution is not compatible with SharePoint 2013. The list html structure changed. You would need to modify the header clases to make it work. I believe I have a 2013 implementation that I’ll try to post shortly.

    • Abdul Basit says:

      Hi Nick, do you have SharePoint 2013 implementation of this?
      i need an urgent help if you have
      Thanks in advance

    • Michael says:

      Nick, ever get around to posting this solution for SharePoint 2013? The CSS works somewhat for collapsing the list in mobile view but no headers and the javascript does not function properly. Thank you.

  3. Michael says:

    FYI. There is no mob-header div in the masterpage I am using. I am using a Bootstrap masterpage from BindTuning. The table.ms-listviewtable, ms-viewheadertr, ms-itmhover are all present. I added the CSS to the Corev15.css file and list do collapse when @media query 768px is met. However, the headers disappear and the javascript is not being applied. I can remove the javascript and the css code will still collapse the SharePoint list accordingly. I am left with modifying the javascript but not sure what div class to reference for the list headers to appear. Your assistance would be highly appreciated. Great post by the way. This is the only post I was able to find that comes close to achieving 100% responsiveness on our SharePoint 2013 on-premise site collection. All I need is to make the SharePoint lists responsive. Thank you.

  4. Jing Jin says:

    Wow, great work Nick!
    You just need to adopt Sharepoint 2013 new structure to make it work.
    Here is the code.

    (function($)
    {
    var $sptableList = $(“table.ms-listviewtable > tbody”);
    var $sptableHeader = $(“table.ms-listviewtable > thead”);
    var $headers = $sptableHeader.find(“> tr.ms-viewheadertr > th”);
    var $items = $sptableList.find(“> tr.ms-itmHoverEnabled”);
    $items.each(function() {
    $item = $(this);
    var counter = 0;
    $cols = $item.find(” > td”);
    $cols.each(function() {
    $mobileHeader = $(“”);
    $mobileHeader.append($($headers[counter]).html());
    $(this).prepend($mobileHeader);
    counter++;
    });
    });
    }(jQuery));

  5. Jing Jin says:

    I reviced the script and css a little bit so it looks good in SharePoint 2013.

    CSS
    .mob-header
    {
    display: none;
    font-weight: bold!Important;
    float: left;
    padding-right: 1em;
    vertical-align: top;
    margin-top: -2px;
    width: 100px;
    font-size: .9em;
    width:42%;
    }
    .mob-seperator
    {
    display: none;
    height:1px;
    background-color:rgba(216, 216, 216, 0.59);
    margin-top:5px;
    margin-bottom:5px;
    }

    @media screen and (max-width: 600px)
    {
    .mob-header
    {
    display: inline-block;
    }
    .mob-content
    {
    float: left;
    padding-right: 1em;
    vertical-align: top;
    margin-top: -2px;
    width:58%;
    font-size: .9em;
    }
    .mob-seperator
    {
    display: inline-block;
    }

    table.ms-listviewtable > tbody > tr
    {
    padding: 10px;
    }
    table.ms-listviewtable > tbody > tr > td
    {
    display: block;
    text-align: left;
    border: none!important;
    width: 100%; /* IE8 */
    float: left; /* IE8 */
    }
    table.ms-listviewtable tr.s4-itm-hover > td, table.ms-listviewtable tr.ms-itmhover:hover > td, tr.s4-itm-selected > td, tr.s4-itm-selected:hover > td
    {
    border: none;
    }
    table.ms-listviewtable .ms-viewheadertr, table.ms-listviewtable tbody tr td.ms-vb-firstCell
    {
    display: none;
    }
    td.ms-list-itemLink-td.ms-cellstyle, img.ms-newdocument-icon {
    display: none;
    }

    jquery
    (function($)
    {
    var $sptableList = $(“table.ms-listviewtable > tbody”);
    var $sptableHeader = $(“table.ms-listviewtable > thead”);
    var $headers = $sptableHeader.find(“> tr.ms-viewheadertr > th”);
    var $items = $sptableList.find(“> tr.ms-itmHoverEnabled”);
    $items.each(function() {
    $item = $(this);
    var counter = 0;
    $cols = $item.find(” > td”);
    $cols.each(function() {
    $mobileHeader = $(“”);
    $mobileHeader.append($($headers[counter]).html());
    $mobileContent = $(“”);
    $mobileContent.append($(this).html());
    $(this).empty();
    $(this).append($mobileHeader);
    $(this).append($mobileContent);
    counter++;
    });
    $mobileSeperator = $(“”);
    $(this).append($mobileSeperator);
    });
    }(jQuery));

  6. Rohit says:

    Hi,

    I have applied the CSS and JQuery in sharepoint 2013 discussion board and all items got disappeard. They are not visible in desktop not even in mobile view.

Leave a Reply

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

*