This is a migrated thread and some comments may be shown as answers.

RadPanelBar inside Sharepoint 2007 Masterpage not resizing

6 Answers 90 Views

Sharepoint Integration

This is a migrated thread and some comments may be shown as answers.

Larry Cage asked on 15 Apr 2010, 03:29 AM

Hi all.

I have a RadPanelBar inside of a Table that is set to a height of 100%. The RadPanelBar is also set to 100%.

The basic structure of the panel is this:

elerik:RadPanelBar ID="RadPanelBar1" runat="server" onitemclick="RadPanelBar1_ItemClick" CausesValidation="False" ExpandMode="FullExpandedItem" BorderWidth="0px"height="100%" Width="100%">
<Items>
<telerik:RadPanelItem runat="server" Expanded="True" Selected="True" Text="HOME" Value="parent">
<Items>
<telerik:RadPanelItem runat="server" Text="LINKS" Value="links">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="about us" Value="aboutus">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="contact us" Value="contactus">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="portal login" Value="login">
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</telerik:RadPanelBar>

My Table is 1 row 2 columns. The background of column 1 is gray. This is where the RadPanel lives.
In IE8 and Chrome the page renders as expected. The panel is expanded and i can see all of HOMEs child items.

In Firefox the panel is shrunk and only displays the first child "LINKS" under home. However, the column in which it resides is full height because i can see the gray background in the open space.

Any thoughts as to how to increase the height of the RadPanelItem to fill the column?

Thanks

6 Answers, 1 is accepted

answered on 28 Apr 2010, 02:57 PM

capture.PNG

I'm starting to thing the problem is the RadAjaxPanel. If I REMOVE THE AJAX PANEL altogether, and set height of the panelbar to 100%, it works in IE and FF. If I LEAVE THE PANEL and set the panelbar to 100% height, it works in IE but not Firefox. FF seems to be limiting the height of the PanelBar to the height of the surrounding ajax panel. I even tried adding

    
                <style type="text/css">  
        
                    .ctl00_NavigationAjaxPanel {height:100%;}  
        
                </style>

and it failed. On that note, finally, if I set the AJAX PANEL height to 100% AND I set the Panelbar height to 100%, it does NOT work in IE or FireFox. It doesn't seem to be making the ajax panel a true 100% of the td. A screenshot attachment shows the details of this.

answered on 28 Apr 2010, 03:27 PM

By the way, I added the following JavaScript and it seems to work fine in IE and FireFox on WINDOW RESIZE only. It does not seem to work on WINDOW LOAD even though the alert pops up for both.

    
                        function resizePanelBar() {  
        
                            var thePanelbar = document.getElementById("<%=RadPanelBar1.ClientID%>");  
        
                            var theSidebar = document.getElementById("Sidebar");  
        
                            thePanelbar.style.height = theSidebar.offsetHeight + "px";  
        
                            //alert(theSidebar.offsetHeight);  
        
                        }  
        
                            window.onload = resizePanelBar;  
        
                            window.onresize = resizePanelBar;

answered on 28 Apr 2010, 03:40 PM

Hello,

Instead of using window.onload please use the pageLoad() function because in ajax page the window.onload executes too early (link) and the controls might not have been initialized.

Here is how it should look like:

function resizePanelBar() {

var thePanelbar = document.getElementById("<%=RadPanelBar1.ClientID%>");

var theSidebar = document.getElementById("Sidebar");

thePanelbar.style.height = theSidebar.offsetHeight + "px";

//alert(theSidebar.offsetHeight);

}

window.onresize = resizePanelBar;

Sys.Application.add_load(resizePanelBar);

Let us know how it goes.

Regards,
Veskoni
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.