Matthew Koon

User Experience & Front End Development

Subscribe to Syndicate
User Experience & Front End Development

jQuery

jQuery

SharePoint & Reporting Services, Dynamic Height Web Parts with jQuery

 

When recently using reporting services integrated with SharePoint 2010 a colleague of mine and I noticed that when a report viewer web part was set to dynamic height the page would not resize correctly. We ended up having to set the height to some large value like 1200px as a work around. But with a little jQuery we were able to fix the problem.

Set the web part properties as such:

(we're using a fixed width, but not neccessary)

Now add the following jQuery to your masterpage, page layout, or web part on that page.

$(window).load(function() {
    setTimeout("FixReportZoneHeight();",1000);            
});
function FixReportZoneHeight() { 
try { 
	$('div[id^="WebPartWPQ"] div div').each(function() { 
		$(this).addClass('dynamic-height'); }); 
	} 
	catch(err) {}
}

The reason for calling a method in the load function is to make sure it isn't called until the page has loaded and the setTimeout is to wait a bit longer until the reports have loaded. Might not be required but this has worked well for me.

Finally the css class:

.dynamic-height {height:auto !important;}

 

SharePoint & Reporting Services, Dynamic Height Web Parts with jQuery

When recently using reporting services integrated with SharePoint 2010 a colleague of mine and I noticed that when a report viewer web part was set to dynamic height the page would not resize correctly. We ended up having to set the height to some large value like 1200px as a work around. But with a little jQuery we were able to fix the problem.

Set the web part properties as such:

(we're using a fixed width, but not neccessary)

Now add the following jQuery to your masterpage.

$(window).load(function() {
    setTimeout("FixReportZoneHeight();",1000);            
});

function FixReportZoneHeight() { try { $('div[id^="WebPartWPQ"] div div').each(function() { $(this).addClass('dynamic-height'); }); } catch(err) {} }

The reason for calling a method in the load function is to make sure it isn't called until the page has loaded and the setTimeout is to wait a bit longer until the reports have loaded. Might not be required but this has worked well for me.

Finally the css class:

.dynamic-height {height:auto !important;}

 

Subscribe to RSS - jQuery