Bootstrap items not stacking on resize

6 posts, 0 answers
  1. Bradley
    Bradley avatar
    4 posts
    Member since:
    Dec 2013

    Posted 15 Oct 2014 Link to this post

    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?
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 20 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bradley
    Bradley avatar
    4 posts
    Member since:
    Dec 2013

    Posted 03 Nov 2014 in reply to Vessy Link to this post

    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>
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 06 Nov 2014 Link to this post

    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.

     
  6. Bradley
    Bradley avatar
    4 posts
    Member since:
    Dec 2013

    Posted 06 Nov 2014 in reply to Vessy Link to this post

    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.
  7. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 11 Nov 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017