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

RadComboBox Width and Labels not calculating correctly With and Without Bootstrap

2 Answers 219 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>





























2 Answers, 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.

 
RRE
Top achievements
Rank 2
Iron
commented on 04 Apr 2023, 05:26 PM

We are on 2023 and Boostrap doesn-t works well with telerik,

despite this blog: https://www.telerik.com/blogs/getting-started-telerik-ui-for-asp-net-core-and-bootstrap-4

I have a RadDate and a RadComboBox

For both problems.

 

Renato

Attila Antal
Telerik team
commented on 06 Apr 2023, 12:36 PM

Hi Renato.

The Blog Post you shared is rather applicable for the ASP.NET Core and Telerik UI for ASP.NET Core.

This forum post is for the ComboBox from the Telerik UI for ASP.NET AJAX suite, which has a slightly different rendering. 

I am assuming that you are using the Telerik ASP.NET AJAX Components and having Twitter bootstrap included breaks the appearance. That is normal since Twitter Bootstrap applies some rules to elements globally and not taking (Telerik) into account. 

We have investigated that issue and we found a workaround for that: Fix incorrect appearance in Telerik controls when using Bootstrap library

I hope this will help resolve the problem.

RRE
Top achievements
Rank 2
Iron
commented on 09 Apr 2023, 03:55 PM

Thank you Attila,

I will study it.

 

Renato

0
Attila Antal
Telerik team
answered on 06 Apr 2023, 12:29 PM | edited on 06 Apr 2023, 12:54 PM

Hi,

I know this has been posted a long time ago, but if anybody is wondering, I will share a quick briefing.

If setting a Width for the Combo, that will control the wrapper element (<div id="RadComboBox1") and not the inner elements (label, etc..).

Having that in mind, the ComboBox does respect the values set in the Width property.

 

Here is a small picture I tried to draw to show, when inspecting the elements in the browser, you could see why they appear as described initially by Brannon.

 

This does not seem to be a fault in the ComboBox.

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

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