1

I struggle to make 2 columns within a list (which are set to multiple lines as they do contain quite some characters that make the list itself very hard to browse) to be minimized/shortened by default and expandable upon clicking to show all of the text.

I found some scripts for SP 2010 and one of them adapted to SP2013, but it is not not working for me.

Can someone help me to realise my request within Sharepoint 2013 without using the SP Designer?

4

You can use some CSS in a script editor web part on the same page where the list is.

If you want it to expand on click, you can change :hover to :focus.

<style type="text/css">
.ms-vb2 .ms-rtestate-field:hover {
    max-height: none;
}
.ms-vb2 .ms-rtestate-field {
    max-width: 250px;
    max-height: 38px;
    overflow: hidden;
}
</style>

Update

To keep a field expanded until the next is clicked, you could do it with Jquery instead.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">

$(window).bind('hashchange', function() {
truncateMultiRow(); 
});

_spBodyOnLoadFunctionNames.push("truncateMultiRow");

    function truncateMultiRow() {
        $(".ms-rtestate-field").after( "<span class=readMore><p>Click to read more</p></span>" );
        $("table.ms-listviewtable > tbody > tr").click(function() {
        $(".ms-rtestate-field").css('max-height', '38px');
        $(this).find(".ms-rtestate-field").css('max-height', 'none');   
        })
    }
</script>
<style type="text/css">
.ms-vb2 .ms-rtestate-field {
    max-width: 250px;
    max-height: 38px;
    overflow: hidden;
}
.readMore {
    color: #3498db;
    cursor: pointer;
}
</style>

So, when one of the multiple lines of text field is click, it will expand, and if you click another, the first one closes and the one clicked will expand instead.

The jQuery is from a CDN, while it works good, you can download the jquery library and add to your site and then refer it locally.

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.

jQuery.com

  • Dear Christoffer, thank you very much for your most helpful comment, this is working really great with the "focus" command in your script. Is there a way to keep the text expanded after a click and collapse it after another? At the moment it stays expanded as long as I hold down the mouse button on the item. – user68489 Jul 10 '17 at 7:04
  • Like, expand one, click on another and expand that one instead and close the other? – Christoffer Jul 10 '17 at 7:10
  • @user68489 see my updated answer – Christoffer Jul 10 '17 at 7:54
  • We are approaching the perfect solution for me. Yes, the Javascript behaves nearly as I wanted it to. I hope I am not asking for too much as I already appreciate your support to this point, but would it be possible that it does not matter where in the respective Sharepoint-List-Entry I am clicking? At the moment I have to target the area where the multiple lines are hidden. If you do not know there is more text, I guess noone would click there. Additionally, is it possible to automatically write like "[Read more]" at the end of the abbreviated, collapsed text so one knows there is more text – user68489 Jul 10 '17 at 10:35
  • @user68489 I'l look into it to expand on row click and get back! – Christoffer Jul 10 '17 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.