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
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.
Rank 2
Iron
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
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.
Rank 2
Iron
Thank you Attila,
I will study it.
Renato
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/.