SharePoint 2010 webpart with RadSplitter not resizing height to fill the browser

[Scott]

I have a SP 2010 webpart that has a rad Splitter with 2 panes and a vertical splitter.  The web part is hosted in a single full page vertical webpart page template.   The problem is the  web part does expand to fill the zone horizontally,  but clips the webpart vertically (height).  

I know the webpart template works because I have another webpart thas is essentially a log that when deployed in that template fills the page and scrolls vertically as expected.

Does anyone have ay examples of getting the controls to cause the zone to expand vertically?

Thanks in advance for any help.

s.

[Rumen]

Hi Scott,

If a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.

You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property):

quote:
"<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. "

You can refer to this online article (http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx) for information as well.

The same is valid when setting the splitter height in percents. In this scenario you should set the height of its parent elements in % (or at least the height of all parent elements until you reach a parent the height of which is set in pixels) - this is a requirement of the HTML specification.

The WebPart is rendered in a DIV element which does not have a fixed size in pixels. See this screenshot: http://screencast.com/t/NqqsvBRHYfot. This is causing the reported problem. In order to resize the splitter properly, you should explicitly set a fixed size to the WebPart -> Edit -> Modify WebPart -> Height section -> Should the Web Part have a fixed height? -> Choose Yes and specify a fixed height in pixels -> Apply and OK.

Best regards,
Rumen
the Telerik team

[Scott]

The response "In order to resize the splitter properly, you should explicitly set a fixed size to the WebPart" does not address my question "Does anyone have ay examples of getting the controls to cause the zone to expand vertically?"

Maybe because I did not include the word "Dynamically" in my question.

[Rumen]

Hello Scott,

We do not have a working example for this custom scenario. The webpart is part of SharePoint and the problem is not related to RadSplitter as explained in my earlier post.

If you are able to get a reference to the WebPart on the client, which is a parentNode of RadSplitter, then you will be able to resize dynamically the splitter in its OnClientLoaded event.

Best regards,
Rumen
the Telerik team

[Scott]

OK.. If I put just a Rad Treeview in my webpart, it works perfectly. The treeview fills the height of the page properly and broswer scroll bars adjust accordingly.

If i place the treeview inside a rad splitter...

<radsplitter height=100% >
<radPane>
<radTreeView height=100% >
</radPane>
<radSplitbar/>
<radPane>
</radPane>
</radSplitter>

The radsplitter does not fill the height of the page.

Viewing the generated html, I see the <div id="...radSplitter1"> that surrounds the splitter <table id="...radSplitter1"> has a style height of 100%, but the table used for the splitter has a curious Style height of 1px.

<DIV style="WIDTH: 400px; HEIGHT: 100%" id=ctl00_m_g_6e8c35ac_3a1e_49b8_97c7_7181b67e4183_ctl00_RadSplitter1>
<TABLE style="POSITION: static; WIDTH: 1px; BORDER-TOP-WIDTH: 1px; HEIGHT: 1px; BORDER-LEFT-WIDTH: 1px" id=RAD_SPLITTER_ctl00_m_g_6e8c35ac_3a1e_49b8_97c7_7181b67e4183_ctl00_RadSplitter1 class="RadSplitter RadSplitter_Default" cellSpacing=0 cellPadding=0>
<TBODY>

The div that houses the first pane, containing the tree has a fixed height.
<DIV style="WIDTH: 196px; HEIGHT: 398px; OVERFLOW: auto" id=RAD_SPLITTER_PANE_CONTENT_ctl00_m_g_6e8c35ac_3a1e_49b8_97c7_7181b67e4183_ctl00_RadPane1>

Is ther some calculation going on on the client that wonlt let the splitter fill the height?

[Stanimir]

Hi Scott,

Could you please send me the source code of your web part? I will review it and advise you further. If you are not able to attach the files here, open an official support ticket, where you can do this. Just mention that the ticket is related the forum thread with ID 418645.

Thank you.

Regards,
Stanimir
the Telerik team