Problem with RAD combobox in IE 8

[citytech team1]

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

[Paul]

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.

[Alexander]

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

[Nencho]

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

[Alexander]

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

[Nencho]

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