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

RadComboBox Width and Labels not calculating correctly With and Without Bootstrap

1 Answer 107 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
B
Top achievements
Rank 1
B asked on 31 Oct 2014, 05:55 PM
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>





























1 Answer, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 05 Nov 2014, 12:37 PM
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.

 
Tags
ComboBox
Asked by
B
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Share this question
or