locked
Sharepoint List Item Row Height RRS feed

  • Question

  • Hi,

    I have a sharepoint list with a summary text field which can get very wordy. When users look at the list the list items are sometimes spaced out because there are so many words in the summary column. How do I set the row hieght of each list item to be a certain size? The summary column can be truncated in this view but when users click on the item they should be able to see the entire content. Can this be done using javascript and a content editor web part?

    Thanks.

    Thursday, May 17, 2012 8:17 PM

Answers

  • You can create a dataview webpart. It'll give you full control of the design. You can either convert the existing list view to xslt or create a dataview from scratch. You'll need SharePoint Designer for both. I'd suggest creating a new dataview webpart. You'll find a lot of articles/instructions online. Here's a link from Microsoft support site on creating dataview.

    http://office.microsoft.com/en-us/sharepoint-designer-help/create-a-data-view-HA010094804.aspx

    The other option could be dropping CSS/Javascript on that page using CEWP, which will set the rows for that table to be of specific height.

    Hope that helps.


     

    Pman
    http://www.pmansLab.com/

    • Marked as answer by Excel_SP Friday, May 18, 2012 5:49 PM
    Friday, May 18, 2012 1:37 AM
  • I just had to  format the single and double quotes. Works great.

    <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   {height:10px;overflow:hidden}
    </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>

    • Marked as answer by Excel_SP Friday, May 18, 2012 5:49 PM
    Friday, May 18, 2012 5:49 PM

All replies

  • You can create a dataview webpart. It'll give you full control of the design. You can either convert the existing list view to xslt or create a dataview from scratch. You'll need SharePoint Designer for both. I'd suggest creating a new dataview webpart. You'll find a lot of articles/instructions online. Here's a link from Microsoft support site on creating dataview.

    http://office.microsoft.com/en-us/sharepoint-designer-help/create-a-data-view-HA010094804.aspx

    The other option could be dropping CSS/Javascript on that page using CEWP, which will set the rows for that table to be of specific height.

    Hope that helps.


     

    Pman
    http://www.pmansLab.com/

    • Marked as answer by Excel_SP Friday, May 18, 2012 5:49 PM
    Friday, May 18, 2012 1:37 AM
  • Thanks Parvez. If you ever attempted a solution using the CEWP and javascript solution please post details.

    Friday, May 18, 2012 2:12 PM
  • I found this code online that should restrict row height. I added a CEWP to the list page and plugged the code in but is does not see to do anything. Is there anything obvious I am missing?

    Thanks.

    <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   {height:26px;overflow:hidden} 
    </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>

    Friday, May 18, 2012 4:54 PM
  • I just had to  format the single and double quotes. Works great.

    <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   {height:10px;overflow:hidden}
    </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>

    • Marked as answer by Excel_SP Friday, May 18, 2012 5:49 PM
    Friday, May 18, 2012 5:49 PM
  • How or better where do you plug it in at?
    Wednesday, April 8, 2015 1:21 PM