Splitter 100% Width

6 posts, 0 answers
  1. Dan
    Dan avatar
    7 posts
    Member since:
    Feb 2019

    Posted 12 Feb Link to this post

    sorry eng not good. i took telerik valuation project from developer, new to telerik.

     

    radsplitter on usercontrol and doesnt resize to screen width at 100% when loaded. once screen resizes from user mouse then radsplitter shows and adjusts to 100%.  please see code to duplicate your bug. please advise workaround

     

    page with control

    <asp:Content ID="Content1" ContentPlaceHolderID="ChildContent" runat="server">
     
        <div style="width: 600px; height: 600px;">
            <div id="divtest" style="display: block">
                <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 1" AutoPostBack="false" Font-Size="Medium"
                    OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
                <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 2" AutoPostBack="false" Font-Size="Medium"
                    OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
            </div>
     
            <div id="div-safeharborContrib" style="display: none; background-color: lightgreen;">
                <ucPSWTest:ucTest ID="ucTest" runat="server" />
            </div>
        </div>
     
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            //![CDATA[               
            function OnClientCheckedChanged(sender, args) {           
                $("#divtest").fadeOut("slow", function () {           
                    $("#div-safeharborContrib").fadeIn("slow", function () {           
                    });
                });
            }               
            //]]>
        </script>
    </telerik:RadScriptBlock>

     

     

    control uctest

    <telerik:RadSplitter runat="server" ResizeMode="Proportional" Orientation="Vertical" Width="100%" Height="650px" VisibleDuringInit="false">
     
        <telerik:RadPane runat="server" Width="25%" />
        <telerik:RadSplitBar runat="server" CollapseMode="Forward" />
        <telerik:RadPane runat="server" BorderStyle="None" BorderWidth="0" Width="75%">               
            <div>test</div>
        </telerik:RadPane>
     
        <telerik:RadSplitBar runat="server" CollapseMode="Backward" />
        <telerik:RadPane runat="server" Width="25%" Height="100%" BackColor="#fffed0" />
             
    </telerik:RadSplitter>

     

     

     

     

     

  2. Dan
    Dan avatar
    7 posts
    Member since:
    Feb 2019

    Posted 12 Feb Link to this post

    when VisibleDuringInit="true" then shows - not 100%. resize window and splitter then 100%. please not good. need splitter to show after load and be 100%. not working

    when VisibleDuringInit="false" then not shows. resize window and then shows and splitter then 100%. please not good.  

    please fix for provide workaround

  3. Dan
    Dan avatar
    7 posts
    Member since:
    Feb 2019

    Posted 13 Feb in reply to Dan Link to this post

    this product no support?
  4. Vessy
    Admin
    Vessy avatar
    2061 posts

    Posted 13 Feb Link to this post

    Hi Dan,

    This issue happens when the Splitter is placed into initially not visible parent like the <div id="div-safeharborContrib"> element in the provided snippet. Calling the Splitter's repaint() method just when you make the <div id="div-safeharborContrib"> visible will force the Splitter to recalculate its size:
    $find("<%=RadSplitterIDHere.ClientID %>").repaint();

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Dan
    Dan avatar
    7 posts
    Member since:
    Feb 2019

    Posted 15 Feb in reply to Vessy Link to this post

    vessy workaround is good.

     

    because RadSplitterMain in usercontrol

     

    aspx page

    var RadSplitterMainPS = null;
    $(window).on("load", function () {
    RadSplitterMainPS = $find('<%= uc.FindControl("RadSplitterMainPS").ClientID %>');
    });

     

    usercontrol external js file

    $("#div-1").fadeOut("slow", function () {
             $("#div-2").fadeIn("slow", function () {
                 RadSplitterMainPS.repaint();
             });
         });

     

    i thank you for help

  6. Vessy
    Admin
    Vessy avatar
    2061 posts

    Posted 19 Feb Link to this post

    Hi,

    You are welcome, Dan - I am glad everything is working properly now.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top