[Solved] Backcolor, Height

[Markus]

I need to set Height at design time and Backcolor at runtime, but both settings will be ignored. are those bug solved in the next control release or is there a work arround available?

[Veselin Vasilev]

Hi Markus,

The Height property defines the height of the DropDown area of the combobox. It is working as expected.

If you want to change the height and the background color of the Input element of the combobox you can do one of  the following:

• CSS way: Add this to the head section of the page:

<style type="text/css">
.RadComboBox_Default .rcbInputCell
{
    background-color: red !important;
    height: 30px !important;
}
</style>

where Default is the name of the Skin of the combobox.

• Javascript way: define the following function

<script type="text/javascript">
function pageLoad()
{
    var combo = $find("<%=RadComboBox2.ClientID %>");
    var comboInput = combo.get_inputDomElement();
    comboInput.style.backgroundColor = "yellow";
    comboInput.style.height = "30px";
}
</script>

I hope this helps.

Kind regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Markus]

Thanks for tipp, but now I have some additonal questions:

- It seems that I cannot set height to a smaller value then the default one. If I set height of combox to 12px this will be ignored, but 30px is possible. Am I right? Why? Is there a workaround available?

- For the textbox I can set style for a disabled combobox separately, but for the combobox I cannot find a CSS selector in the documentation for this porpose. Am I right? Why? Is there a workaround available?

- Am I right that I canot set backcoclor/height in code behind?

[Markus]

Thanks for tipp, but now I have some additonal questions:

- It seems that I cannot set height to a smaller value then the default one. If I set height of combox to 12px (Outlook skin) this will be ignored, but 30px is possible. Am I right? Why? Is there a workaround available?

- For the textbox I can set style for a disabled combobox separately, but for the combobox I cannot find a CSS selector in the documentation for this porpose. Am I right? Why? Is there a workaround available?

- Am I right that I cannot set backcoclor/height in code behind?

- Because it seems that it is not possible to make combombox smaller in height I made the radTextbox higher with CSS, but I was not able to center the text in radTextbox vertically. Any hints, information?

Thanks in advance for the new questions.

Regards Markus

[Veselin Vasilev]

Hi Markus,

Here are the answers to your questions:

1. You can set the Height to a smaller value. You just need to change some other css classes. Here is a sample CSS code:

<style type="text/css">
div.RadComboBox_Default table .rcbInputCell,
div.RadComboBox_Default table .rcbArrowCell
{
    background-color: red;
    height: 12px;
    line-height: 11px;
    padding: 0;
}

div.RadComboBox_Default table .rcbInputCell input
{
    height: 12px;
    line-height: 11px;
    font:9px arial,verdana,sans-serif;
    height: 12px;
    padding: 0;
}

.rcbInput
{
    height: 12px !important;
}
</style>

Also, I suggest that you check the following online help articles:

• Skins
• Understanding the Skin CSS File
• CSS Skin File Selectors

2. The above links will point you to the right direction. There are CSS classes for disabled items - rcbDisabled, etc.

3. Yes, you are right. We will log this in our TO-DO list and we will try to include this in the future versions of the control.

4. Point one should help you to make the height of the combobox smaller.

I hope this helps.
Best wishes,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Markus]

Thanks for help!

Most things are now clear to my, except point 2: I already studied the links you mention and I already tried css selector "rcbDisabled", but as far I understand this style is used to disable items in the list, but what I want to change is the style of the disabled combobox itself. So how can I change this style?

[Veselin Vasilev]

Hi Markus,

If you want to change the style of the input element of the combobox you should use the following CSS classes:

controlling the input style
.RadComboBox_Default .rcbDisabled .rcbInputCell input
.RadComboBox_Default .rcbDisabled .rcbInputCell

controlling the arrow style
.RadComboBox_Default .rcbDisabled .rcbArrowCell
.RadComboBox_Default .rcbDisabled .rcbArrowCell a
.RadComboBox_Default .rcbDisabled .rcbArrowCellHidden a



All the best,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Markus]

Thanks for help, but it is not working, here is the page, I want a red background if combobox is disabled, but style will be ignored.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <style type="text/css">
        .RadComboBox_Outlook .rcbDisabled .rcbInputCell input
        .RadComboBox_Outlook .rcbDisabled .rcbInputCell
        {
            background-color: red !important;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Enabled="false" Skin="Outlook">
    </telerik:RadComboBox>
    </div>

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

By the way the styling of combobox is quite complicate, I was not able to change style with help of documentation, maybe a better docmentation would help.

[Veselin Vasilev]

Hi Markus,

Please try this one:

.RadComboBox_Outlook .rcbDisabled .rcbInputCell
{
    background-color: red ;
}

Thank you for the feedback on documentation. We are constantly working on improving it. We will appreciate if you share with us what else to include in it to make it better.

Thanks

Regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Markus]

Now it is working thanks!