El problemo.
If you have a webpart that displays many rows of data then you might experience one of the following:
- The Div container for the table renders with scroll bars when the data extends past the Div’s height and width where Overflow: auto.
- The webpart zone’s handles the scrolling. The web zones’s height and width can be set to Fixed or Auto (with respect to the page).
There is no way to have the page height adjust such that it (the page) handles the scrolling and the webparts contained within.
Hold on a minute:
The background. I had a project involved displaying search results spanning many rows. The output table was hosted in a Div that has a 400px height. If the results went beyond that height the trusty Overflow: Auto scroll bars kicked in. The client did not want to scroll through the Div but wanted the table to extend down the page such that the browser scroll bars would be used to scroll through the results.
Solution:
At its heart the Page Viewer WebPart is an iFrame with its Src property set in the Properties section of the WebPart configuration page. The example in the previous blog also uses this approach and describes the code.
protected override void RenderWebPart(HtmlTextWriter output)
{
string html = "<iframe src=’" + m_url + queryString + "’ style=’width: “ + m_height + “%; height: “ + m_height + “%;’ scrolling=’no’ frameborder=’no’>" + "</iframe>";
html += "<script language=’javascript’>var webPartId = ‘" + m_webPartDivId + "’;</script>";
output.Write(html);
}
The extra important is the line html += “<script ……” This allows for an extra configurable webpart property that controls the m_webPartDivId value.
The rendered webpart looks like:
<div WebPartID="1926e985-3435-4ef6-a7bc-10ef1aaa9a32"
HasPers="false"
id="WebPartWPQ2"
width="100%"
class="ms-WPBody"
allowDelete="false"
style="height:400px;overflow:auto;" >
<iframe src=’/Autolookup/UCTest.aspx’
style=’width: 100%;
height: 100%;’
scrolling=’no’
frameborder=’no’
ALLOWTRANSPARENCY=’true’>
</iframe>
<script language=’javascript’>
var webPartId = ‘WebPartWPQ2’;
</script>
</div>
The key piece is that the webpart now has its containing Div tag id referenced by the webPartId variable: var webPartId = ‘WebPartWPQ2’;
Now the page code within UCTest.aspx can reference the webpart zone height as follows:
var frameHeight = 400; // desired height
var frameParent = window.parent.parent; // SharePoint page
var webPartId = frameParent.webPartId; // var webPartId = ‘WebPartWPQ2’;
var divWebPart = frameParent.document.getElementById(webPartId);
divWebPart.style.height = frameHeight;
In the project some other code measured the height of my rendered table and set the value of frameHeight and set the Div height through the code above.
Works great.
