I have a splitter with some form controls inside it and when the area is resized with the split bar the controls dont stack, yet if I resize the whole browser window it does. Do I need to call some sort of client resize function?
5 Answers, 1 is accepted
0
Hi ,
If a Splitter is configured properly it should be able to handle he resizing of its children on its own, without executing any additional JavaScript logic. Can you verify that there are not any JavaScript errors thrown on the page when the issue occurs?
It will be really helpful if you follow the steps from this blog post and isolate the problematic configuration into fully runnable sample that we can test on our side and examine what might be causing it.
Looking forward to receiving a reply from you,
Vessy
Telerik
If a Splitter is configured properly it should be able to handle he resizing of its children on its own, without executing any additional JavaScript logic. Can you verify that there are not any JavaScript errors thrown on the page when the issue occurs?
It will be really helpful if you follow the steps from this blog post and isolate the problematic configuration into fully runnable sample that we can test on our side and examine what might be causing it.
Looking forward to receiving a reply from you,
Vessy
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Bradley
Top achievements
Rank 1
Rank 1
answered on 03 Nov 2014, 02:57 PM
Here is a simple page, (You will need to add your own references to bootstrap).
The columns never stack properly (you can try adding the cssclass="content" to the pane or the splitter, it doesnt make a difference)
The columns never stack properly (you can try adding the cssclass="content" to the pane or the splitter, it doesnt make a difference)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> <telerik:RadScriptReference Path="~/Scripts/bootstrap.min.js" /> </Scripts> </telerik:RadScriptManager> <telerik:RadStyleSheetManager ID="RadStyleSheetManager" runat="server"> <StyleSheets> <telerik:StyleSheetReference Path="~/Content/bootstrap.min.css" /> </StyleSheets> </telerik:RadStyleSheetManager> <telerik:RadSplitter ID="RadSplitter1" runat="server"> <telerik:RadPane ID="left" runat="server"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server" ></telerik:RadSplitBar> <telerik:RadPane ID="right" runat="server"> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>0
Hello Bradley,
I tested the provided code, but the columns ale properly stacked on my side. Note, that the "Content" folder has to be registered as a StyleSheetManager folder:
I am attaching my test project to this message, so you can compare its configuration with yours. Hope this helps.
Regards,
Vessy
Telerik
I tested the provided code, but the columns ale properly stacked on my side. Note, that the "Content" folder has to be registered as a StyleSheetManager folder:
<appSettings> <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" /> <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" /> <add key="Telerik.Web.UI.StyleSheetFolders" value="~/Content/" /></appSettings>I am attaching my test project to this message, so you can compare its configuration with yours. Hope this helps.
Regards,
Vessy
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Bradley
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2014, 02:19 PM
Your project produces the same results as mine, they don't stack when you re-size with the split bar. They will however stack if I re-size the browser window.
0
Hi Bradley,
this behavior seems to be standard for the Bootstrap grid-like elements and it is caused by their sizing. You can see that they will not occupy properly even the size of a simple div without additional configurations:
Unfortunately we cannot manage this behavior with our controls and it should be handled per case by the developer. For example you can try a similar configuration or modify it in a way that fits your scenario better:
Regards,
Vessy
Telerik
this behavior seems to be standard for the Bootstrap grid-like elements and it is caused by their sizing. You can see that they will not occupy properly even the size of a simple div without additional configurations:
<div style="width: 178px; border: 1px solid blue;"> <div class="row" style="background-color: red;"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div></div>Unfortunately we cannot manage this behavior with our controls and it should be handled per case by the developer. For example you can try a similar configuration or modify it in a way that fits your scenario better:
<telerik:RadSplitter ID="RadSplitter1" runat="server"> <telerik:RadPane ID="left" runat="server"> <div class="row" style="background-color: red; width: 100%; margin:0;"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar> <telerik:RadPane ID="right" runat="server"> </telerik:RadPane></telerik:RadSplitter>Regards,
Vessy
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.