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

Splitter 100% Width

5 Answers 31 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 12 Feb 2019, 10:21 PM

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>

 

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Dan
Top achievements
Rank 1
answered on 12 Feb 2019, 10:27 PM

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

0
Dan
Top achievements
Rank 1
answered on 13 Feb 2019, 12:42 PM
this product no support?
0
Vessy
Telerik team
answered on 13 Feb 2019, 03:19 PM
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.
0
Dan
Top achievements
Rank 1
answered on 15 Feb 2019, 04:29 PM

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

0
Vessy
Telerik team
answered on 19 Feb 2019, 04:29 PM
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.
Tags
Splitter
Asked by
Dan
Top achievements
Rank 1
Answers by
Dan
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or