Splitter Sizing % madness

4 posts, 0 answers
  1. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 08 Apr 2009 Link to this post

    Hi Guys,

    Splitter.  Frustrated beyond belief.

    A real simple one,  Vertical orientation, left panel splitbar and right panel.

    It will not stretch across the screen.
    Splitter width="100%" panes are width=20% and width = 80%...this results in the Actual Splitter itself offsetting from the left, hiding half the left pane, and reducing the right pane to about 50px.

    And as this runs on a variety of different width monitors,...using fixed sizes is a no go.

    I have tried minwidth, maxwidth, 

    LiveResize

    ="true" ResizeWithBrowserWindow="true"  and all combos I could think of. including not specifying width in splitter or/and panes or variations thereon.

     


    (This after an upgrade to 2209.1 from  Q4 2006,..which also took some effort but worked)

    Funny enough Height="100%" works correctly.

     

    <telerik:RadSplitter ID="RadSplitter" runat="server"

     

     

    Orientation="Vertical" LiveResize="true" ResizeWithBrowserWindow="true"

     

     

    height="100%" Width="100%"

     

     

    BackColor="pink">

     

     

     

    <telerik:RadPane ID="NavPane" runat="server"

     

     

    Width="250px"

     

     

    Height="99%" Scrolling="None" >

     

     

    <table width="100%">...............................................label and buttons

     

    </

    table>

     

    <

    telerik:RadTreeView ID="RadTreeRisk" runat="server"

     

     

    Height="755px" Width="100%" BackColor="yellow"

     

     

    OnNodeExpand="RadTreeRisk_NodeExpand"

     

     

    OnNodeClick="RadTreeRisk_NodeClick"

     

     

    MultipleSelect="false"

     

     

    CausesValidation="false" />

     

     

    </telerik:RadPane>

     

     

    <telerik:RadPane ID="contentPane" runat="server" Scrolling="None"

     

     

    ContentUrl="" Height="100%" Width="100%"

     

     

    Collapsed="false" >

     

    ...............Some grids and divs for labels  (all width=100%)

     

    </telerik:RadPane>

     

     

     

    </telerik:RadSplitter>

     


    It runs in an  asp:Content placeholder  (MasterPage)(asp.net 2.0)
     
    and needs to stretch across the screen accurately   (match with the Head and HorizontalMenus in divs which soze correctly if I use 100% widths.

    TIA
    NEal

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 09 Apr 2009 Link to this post

    Hi Neal,
    I tried to reproduce the odd behavior you describe using the provided code, but to no avail. I have attached my test page for your reference - I tested with Q1 2009 SP1 (2009.1 402) in IE and FF. Could you please send me a running project, demonstrating the problem so that I can research what is causing it?

    Kind regards,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Neal
    Neal avatar
    114 posts
    Member since:
    Apr 2008

    Posted 09 Apr 2009 Link to this post

    Hi,

    Thanks for the quick response.

    I tried it in a standalone project and it was fine. So,..snooped arround and

    problem was in my MasterPage, where I used a script to stretch my Menu (included beneath)
    (which also will no longer work as ChildItemList. of menu.ChildItemList seems no longer to be valid.)

    anyway,... for anyone else wanting to use that script,...Don't

    Thx
    Neal

     

    function Stretch(menu)

     

    {

    // var itemPadding = 48;

    // var itemBorder = 2;

    //

    // var currentWidth = menu.ChildItemList.offsetWidth;

    // for (var i = 0; i < menu.Items.length; i ++)

    // {

    // var itemDomElement = menu.Items[i].TextElement;

    // var percentage = itemDomElement.offsetWidth / currentWidth;

    // var newWidth = Math.round(percentage * menu.DomElement.offsetWidth);

    // itemDomElement.style.width = newWidth - itemPadding + 'px';

    // if (i == menu.Items.length - 1)

    // {

    // var diff = menu.DomElement.offsetWidth - menu.ChildItemList.offsetWidth;

    // itemDomElement.style.width = newWidth + diff - itemPadding - itemBorder + 'px';

    // }

    // }

    };

  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 09 Apr 2009 Link to this post

    Hi Neal,

    The script is relevant to the "classic" RadMenu only. RadMenu for ASP.NET Ajax has a different client-side API. Where did you get that code from?

    All the best,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Back to Top