RadComboBox Width and Labels not calculating correctly With and Without Bootstrap

2 posts, 0 answers
  1. B
    B avatar
    6 posts
    Member since:
    Nov 2012

    Posted 31 Oct 2014 Link to this post

    I have an application that uses RadComboBoxes. I have noticed several issues regarding the width and labels. I have created two testing scenarios to demonstrate some of the
    behavior. Also, I am using bootstrap in my application so to demonstrate the difference
    in behavior between the two, I included examples of both. Attached are the pages rendered in Chrome.

     

     

    Test 1 without Bootstrap:
    Aspx:

    <!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"></telerik:RadScriptManager>

            <div class="container
    vertical-center">

                <div class="row">

                    <div class="col-sm-6
    col-xs-12">

                        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="50%" Label="50% With
    Label:"></telerik:RadComboBox>

                        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="100%" Label="100% With
    Label:"></telerik:RadComboBox>

                        Label="100% w/o Label:
    "

                        <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="100%"></telerik:RadComboBox>

                        Label="50% w/o Label:
    "<br />

                        <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="50%"></telerik:RadComboBox>

                    </div>

                </div>

            </div>

        </form>

    </body>

    </html>

     

    Test 2
    with bootstrap:
    Aspx:

    <!DOCTYPE html>

     

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

        <title></title>

        <link rel="stylesheet" href="~/content/bootstrap.min.css" />

        <link rel="stylesheet" href="~/content/bootstrap-theme.min.css" />

    </head>

    <body>

     

        <form id="form1" runat="server">

            <telerik:RadScriptManager ID="ScriptManager" runat="server">

                <Scripts>

                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>

                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>

                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>

                    <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />

                    <asp:ScriptReference Path="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />

                </Scripts>

            </telerik:RadScriptManager>

            <div class="container
    vertical-center">

                <div class="row">

                    <div class="col-sm-6
    col-xs-12">

                        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="50%" Label="50% With
    Label:"></telerik:RadComboBox>

                        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="100%" Label="100% With
    Label:"></telerik:RadComboBox>

                        Label="100% w/o Label:
    "

                        <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="100%"></telerik:RadComboBox>

                        Label="50% w/o Label:
    "<br />

                        <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="50%"></telerik:RadComboBox>

                    </div>

                </div>

            </div>

        </form>

    </body>

    </html>





























  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Nov 2014 Link to this post

    Hi,

    There are some problems with the ComboBox's built-in label and Bootstrap. We are aware of the issue and we are working on it. 

    Regards,
    Hristo Valyavicharski
    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
Back to Top