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

Bootstrap items not stacking on resize

5 Answers 191 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Bradley
Top achievements
Rank 1
Bradley asked on 15 Oct 2014, 03:29 PM
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

Sort by
0
Vessy
Telerik team
answered on 20 Oct 2014, 06:48 AM
Hi Bradley,

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
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)


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<!DOCTYPE html>
 
<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
Vessy
Telerik team
answered on 06 Nov 2014, 01:11 PM
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:
<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
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
Vessy
Telerik team
answered on 11 Nov 2014, 12:34 PM
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:
<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.

 
Tags
Splitter
Asked by
Bradley
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Bradley
Top achievements
Rank 1
Share this question
or