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

Custom styled RadComboBox problme in IE 9

3 Answers 68 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Duncan
Top achievements
Rank 2
Duncan asked on 04 Jan 2012, 11:47 PM
Hi there everyone, i have the following RadComboBox setup:

<div class="input">
    <telerik:RadComboBox runat="server" ID="radComboBox" AutoPostBack="true"
        Width="394px" EnableEmbeddedBaseStylesheet="False"
        EnableEmbeddedSkins="False" EnableTheming="False"
        ItemsPerRequest="10" MarkFirstMatch="True" ShowMoreResultsBox="True"
        ShowToggleImage="False" EmptyMessage="Search Profiles"
        DropDownCssClass="input-drop" Filter="Contains" DropDownWidth="394px"
        EnableAutomaticLoadOnDemand="True" EnableLoadOnDemand="True" Height="181px"
        OffsetX="-38" OffsetY="8" ShowDropDownOnTextboxClick="False"
        DataTextField="Text" DataValueField="Value" EnableTextSelection="False"
        NoWrap="True">
    </telerik:RadComboBox>
</div>

With the following custom CSS:

.input {
    background-image: url(images/search-input-header.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 33px;
    width: 374px;
    float: left;
    padding: 10px;
}
.input .rcbInput {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    line-height: 29px;
    height: 29px;
    width: 374px;
    background-color: #F2FAFF;
    font-family: 'PT Sans', sans-serif, Arial, Helvetica;
    font-size: 24px;
    font-weight: bold;
    color: #1F80BC;
}
.input .rcbEmptyMessage {
    font-family: 'PT Sans', sans-serif, Arial, Helvetica;
    font-size: 24px;
    font-weight: bold;
    color: #d0e9f9;
}
.input .rcbArrowCellHidden {
    display: none;
}
.input-drop {
    height: 106px;
    width: 374px;
    background-image: url(images/search-dropdown-header.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    overflow: hidden;
    padding: 10px;
    margin-top: 5px;
    margin-left: 29px;
    z-index: 6001;
}
.input-drop .rcbItem,
.input-drop .rcbHovered
{
    float:left;
    overflow:hidden;
    width:175px;
    font-family: 'PT Sans', sans-serif, Arial, Helvetica;
    font-size: 18px;
    font-weight: normal;
    color: #80CDF2;
    text-decoration: none;
    line-height: 22px;
    height: 22px;
    cursor:pointer;
}
.input-drop .rcbItem em,
.input-drop .rcbHovered em
{
    color: #1F80BC;
    font-style: normal;
    font-weight: bold;
}

Everything works great in all browsers except for IE, specifically IE 9... I am unable to click on any items in the dropdown box, almost as if there is a Zindex issue of some sort.

I have v.2011.3.1115.40 (Trial) installed.

Am i missing something that will make the items clickable in IE??

Any help would be great! Thanks,
Duncan

3 Answers, 1 is accepted

Sort by
0
Duncan
Top achievements
Rank 2
answered on 06 Jan 2012, 07:57 PM
Anyone?
0
Dimitar Terziev
Telerik team
answered on 09 Jan 2012, 10:25 AM
Hello Duncan,

Please try to add the following CSS and let me know if the issue persists:
.rcbSlide iframe
       {
           display: none;
           *display: block;
       }

Regards,
Dimitar Terziev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Duncan
Top achievements
Rank 2
answered on 09 Jan 2012, 03:39 PM
That did the trick, thank you.
Tags
ComboBox
Asked by
Duncan
Top achievements
Rank 2
Answers by
Duncan
Top achievements
Rank 2
Dimitar Terziev
Telerik team
Share this question
or