RadPanelBar inside Sharepoint 2007 Masterpage not resizing

7 posts, 0 answers
  1. Larry Cage
    Larry Cage avatar
    1 posts
    Member since:
    Apr 2010

    Posted 14 Apr 2010 Link to this post

    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:

    <t

     

     

    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

     

  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 16 Apr 2010 Link to this post

    Hi Larry,

    We could not replicate this problem locally. Can you send us your web part or a live url so we can test it?


    Regards,
    Peter
    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.

  3. mc2000
    mc2000 avatar
    48 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2010 Link to this post

    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.

  4. mc2000
    mc2000 avatar
    48 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2010 Link to this post

    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;  

  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 28 Apr 2010 Link to this post

    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.
  6. mc2000
    mc2000 avatar
    48 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2010 Link to this post

    This seems to work with one caveat:

    Let's assume my browser window is 800 px tall. I then resize it to 900 px. The table stretches as does the panelbar as expected. All good.

    If I then change the height back to 800px the table nor the panel resizes. If I do a postback everything does resize, though. Any thoughts? Thanks!
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Apr 2010 Link to this post

    Hi Mark,

    We can't reproduce the issue here and we don't know the actual layout of your page to test it reliably. Can you send a sample page and the CSS loaded on it, or at least the RadPanelBar definition with all its containers again along with the CSS? Thank you in advance.

    Best wishes,
    Kamen Bundev
    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.
Back to Top