1

Hope you're well;

What is javaScript code to add on SharePoint list for showing a few lines of text per row so they all the same size where reams of text have been written this is via scroll or expand arrow can it be applied to all views.

This is code I use:

<script>


 if(typeof jQuery=='undefined'){ 
 var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
 document.write('<script src="',jQPath,'"><\/script>'); 
 } </script><style>

.expandText {
  HEIGHT: auto
 }
 .collapseText {
  OVERFLOW: hidden; HEIGHT: 18px
 }</style><script>


 function ExpGroupRenderData(htmlToRender, groupName, isLoaded) { 
 $("#tbod"+groupName+"_").attr("isloaded",isLoaded) 
 .html(htmlToRender) 
 .show("fast",collapseText("#tbod"+groupName+"_")); 
 } 
 function collapseText(group){ 
 if (!group) group = "#MSO_ContentTable"; 
 var html = "<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>"; 
 $(group+" td.ms-vb2>div").each(function(i,e){ 
 $(e).css({display:"inline-block"}); 
 if (e.clientHeight > 35){ 
 $(e).toggleClass("collapseText") 
 .prepend(html); 
 } 
 }); 
 $(group+" img[alt='collapseText']").click(function(event){ 
 $(event.target).parent().toggleClass("collapseText"); 
 }); 
 } 
 $(function() { 
 collapseText(); 
 }); 

</script>

However it works on SP 2010 using content editor web part on a list. But on SP Onnline it don't work.

<style type="text/css">
.collapseText {
    OVERFLOW: hidden; 
    HEIGHT: 18px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 
    collapseText(); 
}); 

function collapseText(){     
    var html = "<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>"; 
    $(".ms-listviewtable td.ms-vb2>div").each(function(i,e){ 
        $(e).css({display:"inline-block"}); 
        if (e.clientHeight > 35){ 
            $(e).toggleClass("collapseText").prepend(html); 
        } 
    }); 
    $(".ms-listviewtable img[alt='collapseText']").click(function(event){ 
        $(event.target).parent().toggleClass("collapseText"); 
    }); 
} 
</script>

I have tried this code it works in SP2010 but not SP Online.

enter image description here

enter image description here

enter image description here

  • Hello, Hope you're well; it don't seem to be working. I have tried the following: •content editor web part •Scrpit editor web part •I saved file as JS and put into site assets and link to content editor web part The code works on SP 2010. – AY_91 Aug 6 '18 at 8:49
0

I would start by testing of this jQuery selector is still valid.

$(".ms-listviewtable td.ms-vb2>div")

SharePoint online in classic mode is based on SharePoint 2013 and not SharePoint 2010. I'm reasonably sure that there are HTML and css class changes between these products.

This is the exact reason why you should be careful with UI customizations. They tend to be break with updates.

  • The code did not work. – AY_91 Aug 6 '18 at 9:37
  • Then you need to inspect your HTML and figure out the correct selector to make this work. Unfortunately I don't have a complete and ready solution. If you don't have any jQuery / javascript or SharePoint experience, this will be hard to figure out. – Oak3 Aug 6 '18 at 9:43
  • How come the code works in SP 2010 – AY_91 Aug 6 '18 at 10:12

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.