Drop-Down Arrow under textbox

[Marco]

Hi guys,

We have several projects using the RadCombobox, and in one particular situation (using DNN v.04.06.02) the arrow button gets placed below the text box. I made sure its container wasn't too small and it was wrapping in some weird way, but it is half the size in width of it's containing table cell. I have several other projects in the same environment using the same components, but not doing this. Has anyone ever had this happen? Here is my code:

<%@ Register Assembly="RadComboBox.Net2" Namespace="Telerik.WebControls" TagPrefix="radC" %>

...

<radC:RadComboBox ID="lstState" runat="server" RadControlsDir="~/controls/RadControls/" Height="100px" Skin="Default" title="Select State"></radC:RadComboBox>

The link to the site in question is here:
Click Here

Any ideas?

Regards,

Marco Andrade

[Rosi]

Hello Marco,

I suggest you try using the following css class in your page:
<style>
.ComboBoxInput_Default
{

float:left !important;

}
</style>

All the best,
Rosi
the Telerik team

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

[Marco]

Hi there,

Thanks so much for the response, much appreciated. It did make the arrow move to the right of the text box, although now it doesn't open up when I click on it. Any suggestions? Again, the link to the site is here. I have the css for the default skin I'm using below:
------------------------------------------------------------------------

/* RadComboBox default embedded skin */

.ComboBoxDropDown_Default
{
    scrollbar-face-color: #e9e9e9;
    scrollbar-highlight-color: #ffffff;
    scrollbar-shadow-color: #e9e9e9;
    scrollbar-3dlight-color: #dbdbdb;
    scrollbar-arrow-color: #787878;
    scrollbar-track-color: #f5f5f5;
    scrollbar-darkshadow-color: #aeaeae;
   
    border: 1px solid #626262;
    background: #fff;
    width: auto;
    text-align: left;
}

.ComboBoxInput_Default,
.ComboBoxInputHover_Default
{
    height: 23px; /*only IE applies this*/
    vertical-align: middle;
    border: 1px solid #626262;
    cursor: default;
    padding: 3px 5px;
    font: normal 12px "Arial", sans-serif;
    float:left!important;
}

.ComboBoxInputHover_Default
{
    background-color: #efefef;
}

.ComboBoxItem_Default,
.ComboBoxItemHover_Default
{
    font: normal 11px "Arial", sans-serif;
    cursor: default;
    color: #333;
    padding: 5px;
    zoom: 1;
}

.ComboBoxItemHover_Default
{
    background-color: #4c4c4c;
    color: #fff;
}

.ComboBoxImage_Default,
.ComboBoxImageHover_Default
{
    vertical-align:middle;
}

.ComboBoxHeader_Default
{
    background-color: #929292;
    color: #fff;
    font: bold 11px Arial, sans-serif;
}

.ComboBoxHeader_Default td
{
    border-right: 1px solid #5f5f5f;
    text-indent: 5px;
}
 
.ComboBoxItemDisabled_Default
{
    font: normal 11px "Arial", sans-serif;
    color: #ccc;
    cursor: default;
    padding: 5px;
}
 
.ComboBoxLoadingMessage_Default
{
    font: normal 12px "Arial", sans-serif;
}
 
.ComboBoxMoreResultsMessage_Default
{
    color: #999;
    text-align: center;
    padding: 3px 0;
    font-size: 10px;
}

.ComboBoxMoreResultsImage_Default
{
    padding: 5px 0 0 0;
}
 
.ComboBoxMoreResultsBox_Default
{
    background: #f3f3f3;
}

[Rosi]

Hello Marco,

The dropdown is actually visible on the page, but its width is "0px". I suggest you set the DropDownWidth property of RadComboBox.

Hope this helps.

Regards,
Rosi
the Telerik team

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

[Marco]

Thanks so much!