Problem with RAD combobox in IE 8

6 posts, 0 answers
  1. citytech team1
    citytech team1 avatar
    5 posts
    Member since:
    Sep 2009

    Posted 27 Nov 2009 Link to this post

    Hi,
    I am using RAD controls for .Net Framework 3.5 [Product version  2008.2.826.20]
    , We are getting problem with rad combobox in IE 8 , in compatible view it is OK, but in normal view with length of the combo box growing .
    Here is the code we use in aspx page:
    <telerik:RadComboBox ID="rcbNetwork" runat="server" Skin="Raikum" EnableEmbeddedSkins="false"
                            Width="181">
                        </telerik:RadComboBox>


    We tried to maintain width with custom skin, style border is working but width is not working in IE 8, Here is original [ no border and no width maintain] the custom skin.


    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    /* RadComboBox Raikum skin */

    /*global*/

    .RadComboBox_Raikum *
    {
        margin: 0;
        padding: 0;
    }

    .RadComboBox_Raikum,
    .RadComboBox_Raikum .rcbInput,
    .RadComboBoxDropDown_Raikum
    {
        font: 12px "Segoe UI", Arial, sans-serif;
        color: #333;
        text-align: left;
    }

    .RadComboBox_Raikum_rtl,
    .RadComboBox_Raikum_rtl .rcbInput,
    .RadComboBoxDropDown_Raikum_rtl
    {
        text-align: right;
    }

    /* combobox */

    .RadComboBox_Raikum
    {
        vertical-align: middle;
    }

    * html .RadComboBox_Raikum { vertical-align: top; }

    .RadComboBox_Raikum table
    {
        border: 0;
        border-collapse: collapse;
    }

    .RadComboBox_Raikum table td.rcbInputCell
    {
        
        height: 22px;
        line-height: 22px;
        vertical-align: middle;
        padding: 0;
        /*border:1px solid #ff0000;*/
    }



    * html .RadComboBox_Raikum td.rcbInputCell
    {
        height /**/: 22px;
        line-height /**/: 22px;
    }

    .RadComboBox_Raikum .rcbInputCellLeft,
    .RadComboBox_Raikum .rcbInputCellRight,
    .RadComboBox_Raikum .rcbArrowCellLeft,
    .RadComboBox_Raikum .rcbArrowCellRight
    {
        background: url('ComboBox/rcbSprite.png') no-repeat;
    }

    * html .RadComboBox_Raikum .rcbInputCellLeft,
    * html .RadComboBox_Raikum .rcbInputCellRight,
    * html .RadComboBox_Raikum .rcbArrowCellLeft,
    * html .RadComboBox_Raikum .rcbArrowCellRight
    {
        background: url('ComboBox/rcbSpriteIE6.png') no-repeat;
    }

    .RadComboBox_Raikum td.rcbInputCellLeft { background-position: 0 0; }
    .RadComboBox_Raikum td.rcbInputCellRight { background-position: 100% 0; }

    .RadComboBox_Raikum .rcbHovered .rcbInputCellLeft { background-position: 0 0; }
    .RadComboBox_Raikum .rcbHovered .rcbInputCellRight { background-position: 100% 0; }

    .RadComboBox_Raikum .rcbFocused .rcbInputCellLeft { background-position: 0 0; }
    .RadComboBox_Raikum .rcbFocused .rcbInputCellRight { background-position: 100% 0; }

    .RadComboBox_Raikum .rcbHovered .rcbReadOnly td.rcbInputCellLeft { background-position: 0 -22px; }
    .RadComboBox_Raikum .rcbHovered .rcbReadOnly td.rcbInputCellRight { background-position: 100% -22px; }

    .RadComboBox_Raikum .rcbFocused .rcbReadOnly td.rcbInputCellLeft { background-position: 0 -44px; }
    .RadComboBox_Raikum .rcbFocused .rcbReadOnly td.rcbInputCellRight { background-position: 100% -44px; }

    .RadComboBox_Raikum .rcbInputCell .rcbInput
    {
        width:100%;
        background: transparent;
        border: 0;
        vertical-align: middle;
        padding: 2px 0 1px;
        outline: 0;
        /*border:1px solid #ff0000;*/
    }


    * html .RadComboBox_Raikum .rcbInputCell .rcbInput
    {
        height /**/: 18px;
    }

    .RadComboBox_Raikum .rcbInputCell .rcbEmptyMessage
    {
        color: #666;
        font-style: italic;
    }

    .RadComboBox_Raikum .rcbReadOnly .rcbInput
    {
        cursor: default;
    }

    .RadComboBox_Raikum table td.rcbInputCell,
    .RadComboBox_Raikum .rcbInputCell .rcbInput
    {
        padding-left: 2px;
    }

    .RadComboBox_Raikum_rtl table td.rcbInputCell,
    .RadComboBox_Raikum_rtl .rcbInputCell .rcbInput
    {
        padding-right: 2px;
        padding-left: 0;
    }

    .RadComboBox_Raikum .rcbHovered .rcbInputCell .rcbInput
    {
        color: #045cb5;
    }

    .RadComboBox_Raikum table td.rcbArrowCell
    {
        width: 18px;
        padding: 0;
        /*border:1px solid #ff0000;*/
        
        
        
    }

    .RadComboBox_Raikum td.rcbArrowCellLeft { background-position: -18px -88px; z-index:1200; }
    .RadComboBox_Raikum td.rcbArrowCellRight { background-position: 0 -88px; z-index:1200; }

    .RadComboBox_Raikum .rcbHovered .rcbArrowCellLeft { background-position: -54px -88px; }
    .RadComboBox_Raikum .rcbHovered .rcbArrowCellRight { background-position: -36px -88px; }

    .RadComboBox_Raikum .rcbFocused .rcbArrowCellLeft { background-position: -90px -88px; }
    .RadComboBox_Raikum .rcbFocused .rcbArrowCellRight { background-position: -72px -88px; }

    .RadComboBox_Raikum td.rcbArrowCellHidden,
    .RadComboBox_Raikum .rcbHovered td.rcbArrowCellHidden,
    .RadComboBox_Raikum .rcbFocused td.rcbArrowCellHidden { background-position: -15px -88px; }
    .RadComboBox_Raikum table.rcbDisabled td.rcbArrowCellHidden { background-position: -123px -88px; }

    .RadComboBox_Raikum .rcbHovered .rcbReadOnly td.rcbArrowCellHidden { background-position: -51px -88px; }
    .RadComboBox_Raikum .rcbFocused .rcbReadOnly td.rcbArrowCellHidden { background-position: -87px -88px; }

    .RadComboBox_Raikum .rcbArrowCell a
    {
        position: relative;
        outline: 0;
        overflow: hidden;
        display: block;
        width: 18px;
        height: 22px;
        text-decoration: none;
        text-indent: -9999px;
        font-size: 1px;
        
    }

    div.RadComboBox_Raikum td.rcbArrowCellHidden,
    div.RadComboBox_Raikum .rcbArrowCellHidden a
    {
        width: 3px;
    }

    /* Read-only styles */

    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCell { width: 16px; }
    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCell a { width: 16px; }

    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCellLeft { background-position: -18px -88px; }
    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCellRight { background-position: -2px -88px; }

    .RadComboBox_Raikum .rcbHovered .rcbReadOnly .rcbArrowCellLeft { background-position: -54px -88px; }
    .RadComboBox_Raikum .rcbHovered .rcbReadOnly .rcbArrowCellRight { background-position: -38px -88px; }

    .RadComboBox_Raikum .rcbFocused .rcbReadOnly .rcbArrowCellLeft { background-position: -90px -88px; }
    .RadComboBox_Raikum .rcbFocused .rcbReadOnly .rcbArrowCellRight { background-position: -74px -88px; }

    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCellHidden,
    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCellHidden a { width: 3px; }
    .RadComboBox_Raikum .rcbReadOnly td.rcbArrowCellHidden { background-position: -15px -88px; }
    .RadComboBox_Raikum .rcbHovered .rcbReadOnly td.rcbArrowCellHidden { background-position: -51px -88px; }
    .RadComboBox_Raikum .rcbFocused .rcbReadOnly td.rcbArrowCellHidden { background-position: -87px -88px; }

    /* dropdown */

    .rcbSlide
    {
        position: absolute;
        overflow: hidden;
        display: none;
        _height: 1px;
        float: left;
        
    }

    .RadComboBoxDropDown_Raikum .rcbHeader,
    .RadComboBoxDropDown_Raikum .rcbFooter,
    .RadComboBoxDropDown_Raikum .rcbMoreResults a
    {
        background-image: url('ComboBox/rcbSprite.png');
        background-repeat: no-repeat;
    }

    * html .RadComboBoxDropDown_Raikum .rcbHeader,
    * html .RadComboBoxDropDown_Raikum .rcbFooter,
    * html .RadComboBoxDropDown_Raikum .rcbMoreResults a
    {
        background-image: url('ComboBox/rcbSprite.gif');
        background-repeat: no-repeat;
    }

    .RadComboBoxDropDown_Raikum
    {
        position: absolute;
        background: #fff;
        border: 1px solid #c6c7d2;
        border-top-color: #83868d;
        cursor: default;
        font-size: 11px;
    }

    .RadComboBoxDropDown_Raikum_rtl
    {
        text-align: right;
        direction: rtl;
    }

    .RadComboBoxDropDown_Raikum .rcbScroll
    {
        overflow: auto;
        position: relative;
    }

    .RadComboBoxDropDown_Raikum .rcbList
    {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
    }

    .RadComboBoxDropDown_Raikum .rcbHeader,
    .RadComboBoxDropDown_Raikum .rcbFooter
    {
        background-repeat: repeat-x;
        background-color: #f1f2f4;
        background-position: 0 -110px;
        padding: 5px 7px 4px;
    }

    .RadComboBoxDropDown_Raikum .rcbHeader
    {
        border-bottom: 1px solid #d5d5d5;
        margin-bottom: 1px;
    }

    .RadComboBoxDropDown_Raikum .rcbFooter
    {
        border-top: 1px solid #d5d5d5;
        margin-top: 1px;
    }

    .RadComboBoxDropDown_Raikum .rcbNoWrap .rcbItem,
    .RadComboBoxDropDown_Raikum .rcbNoWrap .rcbHovered,
    .RadComboBoxDropDown_Raikum .rcbNoWrap .rcbDisabled,
    .RadComboBoxDropDown_Raikum .rcbNoWrap .rcbLoading
    {
        white-space: nowrap;
    }

    .RadComboBoxDropDown_Raikum .rcbItem,
    .RadComboBoxDropDown_Raikum .rcbHovered,
    .RadComboBoxDropDown_Raikum .rcbDisabled,
    .RadComboBoxDropDown_Raikum .rcbLoading
    {
        padding: 2px 19px 2px 6px;
        margin: 0 1px;
    }

    html>/**/body .RadComboBoxDropDown_Raikum .rcbItem,
    html>/**/body .RadComboBoxDropDown_Raikum .rcbHovered,
    html>/**/body .RadComboBoxDropDown_Raikum .rcbDisabled,
    html>/**/body .RadComboBoxDropDown_Raikum .rcbLoading
    {
        min-height: 13px;
    }

    * html .RadComboBoxDropDown_Raikum .rcbItem,
    * html .RadComboBoxDropDown_Raikum .rcbHovered,
    * html .RadComboBoxDropDown_Raikum .rcbDisabled,
    * html .RadComboBoxDropDown_Raikum .rcbLoading
    {
        height: 13px;
        word-break: break-all;
    }

    *+html .RadComboBoxDropDown_Raikum .rcbItem,
    *+html .RadComboBoxDropDown_Raikum .rcbHovered,
    *+html .RadComboBoxDropDown_Raikum .rcbDisabled,
    *+html .RadComboBoxDropDown_Raikum .rcbLoading
    {
        height: auto;
        word-break: break-all;
    }

    .RadComboBoxDropDown_Raikum_rtl .rcbItem,
    .RadComboBoxDropDown_Raikum_rtl .rcbHovered,
    .RadComboBoxDropDown_Raikum_rtl .rcbDisabled,
    .RadComboBoxDropDown_Raikum_rtl .rcbLoading
    {
        padding: 2px 6px 2px 19px;
    }

    .RadComboBoxDropDown_Raikum .rcbImage
    {
        vertical-align: middle;
        margin: 0 6px 2px 0;
    }

    .RadComboBoxDropDown_Raikum_rtl .rcbImage
    {
        margin: 0 0 2px 6px;
    }

    .RadComboBoxDropDown_Raikum em
    {
        font-style: normal;
        font-weight: bold;
    }

    .RadComboBoxDropDown_Raikum .rcbItem em
    {
        background: #e5e5e5;
    }

    .RadComboBoxDropDown_Raikum .rcbHovered
    {
        background: #39f;
        color: #fff;
    }

    .RadComboBoxDropDown_Raikum .rcbSeparator
    {
        color: #666;
        background: #D3ECF9;
    }

    .RadComboBox_Raikum .rcbDisabled .rcbInputCell .rcbInput,
    .RadComboBoxDropDown_Raikum .rcbDisabled
    {
        color: #999;
        cursor: default;
    }

    .RadComboBox_Raikum .rcbDisabled td.rcbInputCellLeft { background-position: 0 -66px; }
    .RadComboBox_Raikum .rcbDisabled td.rcbInputCellRight { background-position: 100% -66px; }
    .RadComboBox_Raikum .rcbDisabled td.rcbArrowCellLeft { background-position: -126px -88px; }
    .RadComboBox_Raikum .rcbDisabled td.rcbArrowCellRight { background-position: -108px -88px; }
    .RadComboBox_Raikum .rcbDisabled .rcbReadOnly td.rcbArrowCellRight { background-position: -110px -88px; }
    .RadComboBox_Raikum .rcbDisabled .rcbReadOnly td.rcbArrowCellHidden { background-position: -15px -88px; }

    .RadComboBoxDropDown_Raikum .rcbLoading
    {
        background: #f0f0f0;
        text-align: center;
    }

    .RadComboBoxDropDown_Raikum .rcbMoreResults
    {
        clear: both;
        border-top: 1px solid #c6c7d2;
        background: #fff;
        position: relative;
        padding: 0 6px 0;
        text-align: center;
        margin-top: 1px;
    }

    .RadComboBoxDropDown_Raikum .rcbMoreResults a
    {
        display: inline-block;
        width: 15px;
        height: 9px;
        background-position: -157px -94px;
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
        vertical-align: middle;
    }

    * html .RadComboBoxDropDown_Raikum .rcbMoreResults a
    {
        font-size: 0;
        line-height: 0;
        text-indent: 0;
    }

    *+html .RadComboBoxDropDown_Raikum .rcbMoreResults a
    {
        font-size: 0;
        line-height: 0;
        text-indent: 0;
    }

    .RadComboBoxDropDown_Raikum .rcbMoreResults a:hover
    {
        background-position: -188px -94px;
    }

    .RadComboBoxDropDown_Raikum .rcbMoreResults span
    {
        vertical-align: middle;
        height: 19px;
        line-height: 19px;
        display: inline-block;
    }

    .RadComboBoxDropDown_Raikum .rcbSeparatedList .rcbItem,
    .RadComboBoxDropDown_Raikum .rcbSeparatedList .rcbHovered,
    .RadComboBoxDropDown_Raikum .rcbSeparatedList .rcbDisabled,
    .RadComboBoxDropDown_Raikum .rcbSeparatedList .rcbLoading
    {
        padding-left: 12px;
    }

    .RadComboBoxDropDown_Raikum .rcbSeparatedList .rcbSeparator
    {
        padding-left: 6px;
    }

    /*hacks*/

    /*Opera start*/
    @media screen and (min-width: 550px)
    {
        .RadComboBoxDropDown_Raikum_rtl .rcbItem,
        .RadComboBoxDropDown_Raikum_rtl .rcbHovered,
        .RadComboBoxDropDown_Raikum_rtl .rcbDisabled,
        .RadComboBoxDropDown_Raikum_rtl .rcbLoading
        {
            padding: 2px 6px 2px 19px;
        }
    } /*Opera end*/


    Please advise
    Thanks in advance
    Citytech Development Team



  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Nov 2009 Link to this post

    Hi there,

    We tried to reproduce the issue using your code snippet and the latest versions of the controls, but to no avail. I suggest you upgrade to the latest version of the control(s); if the problem persists, it will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alexander
    Alexander avatar
    14 posts
    Member since:
    Oct 2007

    Posted 29 May 2013 Link to this post

    Hi
    There is still some trouble with radcombobox in IE8.
    I'm developing with VS2012, VB.NET 4.5,   64bit, Telerik 2013.1 417

    I'm trying to set a background image(flag) with no-repeat, but JS will not accept the no-repeat parameter. In fact it will not accept inherit either.
    repeat, repeat-x and repeat-y is ok.

    The following JS code obtained from Telerik demos is used to achieve this:

    function showItemImageLanguage(sender) {

    var input = sender.get_inputDomElement();

    input.style.background = "url(img/flags/" + document.getElementById("<%= selectedLanguageID.ClientID%>").value + ".png) no-repeat";

    input.style.backgroundPosition = "left center";

    }

    IN IE9 and IE10 this is ok, and if i change

    <meta http-equiv="X-UA-Compatible" content="IE=8" />

    to '

    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    the error is ignored, but JS will fail in IE8, and all Ajax scripts also fail, braking the site.

    Here is aspx code for the radcombo

    <telerik:RadComboBox ID="ddlLanguageID" DropDownWidth="180px" runat="server" TabIndex="24" MaxLength="20" AccessKey="l" BorderStyle="None" AutoPostBack="True" OnSelectedIndexChanged="DdlLanguageIDSelectedIndexChanged" CssClass="ComboCustomCssClass" Skin="Windows7" Width="180px" OnClientLoad="showItemImageLanguage">

    <CollapseAnimation Duration="200" Type="OutQuint" />

    </telerik:RadComboBox>

    ComboCustomCssClass(snip from CSS file)

    div.ComboCustomCssClass .rcbInputCell INPUT.rcbInput

    {

    padding-left: 30px;

    line-height: 12px;

    font-size: 12px;

    }

     

    Do you have any tip on how to fix this?
    Currenty I have used repeat-y because using nothing repeats the image horizontally and thereby making a very ugly combobox.

    Any help would be apreciated.

    regards
    Alexander

  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 03 Jun 2013 Link to this post

    Hello Alexander,

    I have tried to replicate the described problem, base on the provided implementation, but to no avail. Here is a video, demonstrating the behavior at my end. Please correct me if I had missed something.

    Regards,
    Nencho
    Telerik
    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.
  6. Alexander
    Alexander avatar
    14 posts
    Member since:
    Oct 2007

    Posted 03 Jun 2013 Link to this post

    Hi,
    Thank you for your reply.

    I'm sorry, I should have said this, but IE10 in IE8 mode is not good enough.
    That will work, and it does in my dev environment also, but in IE8, ver 8.0.6001.18702 that I have in my test environment it fails with a JS error that states that no-repeat is an invalid parameter. The same happens for other users using IE8.

    Regards
    Alexander
  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 06 Jun 2013 Link to this post

    Hello Alexander,

    I am still unable to replicate the described issue. Here is a video, demonstrating the behavior at my end, under IE10. Would you also provide us with a video, which demonstrates the problem at your end?


    Regards,
    Nencho
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017