Custom styled RadComboBox problme in IE 9

4 posts, 0 answers
  1. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 04 Jan 2012 Link to this post

    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
  2. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 06 Jan 2012 Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 09 Jan 2012 Link to this post

    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
  5. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 09 Jan 2012 Link to this post

    That did the trick, thank you.
Back to Top