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

Help! Setting the input height for RadComboBox via Skin

1 Answer 117 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Itai Dor-On
Top achievements
Rank 1
Itai Dor-On asked on 24 May 2010, 12:53 AM

Telerik: 2010.1.519.35 +  VS2008 SP1 + vs doc patch, on Win7

Hi

I have setup a custom skin named MySkin. My base Style is Web20. I noticed that it is indeed included in the output page using “View Source” in the browser. I also noticed my custom height setting is overridden by using FireBug at the dom level

Here is what happens:

My .RadComboBox_MySkin .rcbInputCell { height:150px;} selector get’s overriden by the .RadComboBox table td.rcbInputCell
selector for:

<td style="width: 100%;" class="rcbInputCell rcbInputCellLeft"><input type="text" readonly="readonly" value="Redwood" id="RadComboBox1_Input" class="rcbInput" name="RadComboBox1" autocomplete="off"></td>

Attempting to change the height property during runtime via firebug produces odd ui

I also added EnableEmbeddedBaseStylesheet="False"  to the declaration tag, and got my intended height style setting, but this totally mixed-up the control layout

What am I doing wrong??? Code below ...

Tnx

-Itai

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <link href="Skins/MyComboBox/ComboBox.MySkin.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
  <Scripts>
   <%--Needed for JavaScript IntelliSense in VS2010--%>
   <%--For VS2008 replace RadScriptManager with ScriptManager--%>
   <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" />
  </Scripts>
 </telerik:RadScriptManager>
 <script type="text/javascript">
  //Put your JavaScript code here.
    </script>
 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
 </telerik:RadAjaxManager>
 <div>

     <telerik:RadComboBox ID="RadComboBox1" Runat="server" Skin="MySkin"
            EnableEmbeddedSkins="False">
        </telerik:RadComboBox>

 </div>
 </form>
</body>
</html>

 

 

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 25 May 2010, 04:25 PM
Hello Itai,

Unfortunately its not so easy to change the height of RadComboBox, unless you are using the Simple skin as a base. The RadComboBox background in all other skins is done with an image sprite and to change the height you will need to edit the height of the background image. Check this detailed tutorial on how to do it:
http://www.telerik.com/help/aspnet-ajax/combobox-tutorial-change-height-input-element.html

Kind regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
ComboBox
Asked by
Itai Dor-On
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or