[Solved] Height of combobox

[Yannis]

Hi all,

I have a combobox in the cell of a table. For some weird reason the combobox fill the whole area of the cell. I have set the cell's padding to 2px, but i dont really want the cell to be that large.

Is there any way to set the combobox height to some specific value?

My css is

	#searchFilter {
	background:url(../images/insideSearchBck.gif) no-repeat left top;
	width:282px;
	padding:0px;
	}
	#searchFilter h2 {
	color:#FFFFFF;
	}
	#searchFilter td {
	padding:2px 0 5px 15px;
	}
	#searchFilter th {
	padding:5px 0 0 15px;
	font-weight:bold;
	font-size:75%;
	}
	#searchFilter input.searchBtn {
	background:url(../images/insideSearchBtn.gif) no-repeat;
	width:282px;
	height:34px;
	border:none;
	}
	#searchFilter select {
	width:240px;
	}
	#searchFilter select.time {
	width:100px;
	}
	#searchFilter input {
	width:240px;
	}
	#searchFilter a {
	font-size:75%;
	font-weight:bold;
	color:#0097de;
	}

and the asp is:

<div id="searchFilter">
        <table cellpadding="0" cellspacing="0">
        <tr><td style="padding-top:10px;" colspan="2"><h2>Something</h2></td></tr>
        <tr><th colspan="2">Something</th></tr>
        <tr><td colspan="2">
            <telerik:RadComboBox ID="cmbNomoi" Runat="server" >
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            </telerik:RadComboBox>
        </td></tr>
        ................ - Several cells with combobox follow - ..............
    </table>
</div>

[Alex Gyoshev]

Hello Yannis,

The issue is caused by conflicting CSS styles; because RadComboBox uses a table to display the input box and toggle button, the following styles apply to it and cause improper rendering:
Line 10: #searchFilter td
Line 30: #searchFilter input

In order to remove the conflict, add class names to the table cells and the input, e.g.:

<table cellpadding="0" cellspacing="0">
    <tr><td class="c" style="padding-top:10px;" colspan="2"><h2>Something</h2></td></tr>
    <tr><th colspan="2">Something</th></tr>
    <tr><td class="c" colspan="2">
        <telerik:RadComboBox ID="cmbNomoi" Runat="server">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </telerik:RadComboBox>
    </td></tr>
    ................ - Several cells with combobox follow - ..............
</table>

and re-write the rules as
Line 10: #searchFilter td.c
Line 30: #searchFilter .myInput


Regarding the height of the RadComboBox, you could use the following styles to adjust it (replacing 12px with whatever you like):

<style type="text/css">
div.RadComboBox_Default table .rcbInputCell,
div.RadComboBox_Default table .rcbArrowCell
{
    background-color: gray;
    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>

Sincerely yours,
Alex
the Telerik team

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

[A]

Hi
I used your example css to set the height of my combobox and it does not work.
The background is gray but the height is still wrong.

I am using RadControls for ASP.NET AJAX release Q2 sp1  (2008.2.826.35) and the DEFAULT skin (EnableEmbeddedSkins=false)

My DOCTYPE is XHTML 1.0 transitional.

Thanks

[Alex Gyoshev]

Hello Leitzinger,

The provided solution was specific to the given case. Please refer to the "Controlling Appearance" help topic for the most common scenarios or provide more detail about your case (for the most accurate response, open a support ticket and provide a sample project that demonstrates the issue).

Kind regards,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.