radcombobox css on ie10

[Loyal User]

hi,
radcombobox doesn't display properly on ie10

[faisal]

I also facing some issue while applying custom style, but in all version of IE, its nots effecting,
but on the other browser its showing fine.

check the attached image.

[Magdalena]

Hello,

   We have tested the RadComboBox in the IE10, but the issue, demonstrated in the provided screen shot  did not reproduced locally. Here is a video demonstrating the testing for your reference. Please let us know if I had missed something important. Could you also clarify some more details about the issue?

• are you applying some additional styles to the page with RadComboBox?
• which version of the control are you using?
• what render mode are you applying?

  Regarding the issue mentioned by Faisal:
Could you please provide all custom style sheets that you have apply to the page with RadComboBox or a live URL where the issue is reproduced? We need to test it locally, in order to assist you in the most efficient way.

Regards,
Magdalena
Telerik

[faisal]

Hi Magdalena

/* Combobox */
.RadComboBox {
  color: #272722;
  font: normal 12px/16px "Segoe UI", Arial, Helvetica, sans-serif;
   }
  .RadComboBox table{ background:#e7e3e7; padding:4px!important; border-radius:2px!important; }
  .RadComboBox .rcbInputCell,
  .RadComboBox .rcbArrowCell {
    background-image: url('Common/radFormSprite.png');
    _background-image: url('Common/radFormSpriteIE6.png'); }
  .RadComboBox .rcbInputCellLeft {
    background-position: 0 0; }
  .RadComboBox .rcbInputCellRight {
    background-position: 100% 0; }
  .RadComboBox .rcbInput {
    color: #272722;
    font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 16px; }
  .RadComboBox .rcbEmptyMessage {
    color: #9d9b7c;
    font-style: italic; }
  .RadComboBox .rcbArrowCellLeft {
    background-position: 0 -176px; }
  .RadComboBox .rcbArrowCellRight {
    background-position: -18px -176px; }
  .RadComboBox .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 0; }
  .RadComboBox .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% 0; }
  .RadComboBox .rcbHovered .rcbInputCellLeft {
    background-position: 0 -22px; }
  .RadComboBox .rcbHovered .rcbInputCellRight {
    background-position: 100% -22px; }
  .RadComboBox .rcbHovered .rcbInput {
    color: black; }
  .RadComboBox .rcbHovered .rcbArrowCellLeft {
    background-position: -36px -176px; }
  .RadComboBox .rcbHovered .rcbArrowCellRight {
    background-position: -54px -176px; }
  .RadComboBox .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -22px; }
  .RadComboBox .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -22px; }
  .RadComboBox .rcbFocused .rcbInputCellLeft {
    background-position: 0 -44px; }
  .RadComboBox .rcbFocused .rcbInputCellRight {
    background-position: 100% -44px; }
  .RadComboBox .rcbFocused .rcbInput {
    color: black; }
  .RadComboBox .rcbFocused .rcbArrowCellLeft {
    background-position: -72px -176px; }
  .RadComboBox .rcbFocused .rcbArrowCellRight {
    background-position: -90px -176px; }
  .RadComboBox .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -44px; }
  .RadComboBox .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -44px; }
  .RadComboBox .rcbDisabled .rcbInputCellLeft {
    background-position: 0 -66px; }
  .RadComboBox .rcbDisabled .rcbInputCellRight {
    background-position: 100% -66px; }
  .RadComboBox .rcbDisabled .rcbInput {
    color: #787777; }
  .RadComboBox .rcbDisabled .rcbArrowCellLeft {
    background-position: -108px -176px; }
  .RadComboBox .rcbDisabled .rcbArrowCellRight {
    background-position: -126px -176px; }
  .RadComboBox .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -66px; }
  .RadComboBox .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -66px; }
  .RadComboBox .rcbReadOnly .rcbInputCellLeft {
    background-position: 0 -88px; }
  .RadComboBox .rcbReadOnly .rcbInputCellRight {
    background-position: 100% -88px; }
  .RadComboBox .rcbReadOnly .rcbInput {
    color: #5b5a48; }
  .RadComboBox .rcbReadOnly .rcbArrowCellLeft {
    background-position: -144px -176px; }
  .RadComboBox .rcbReadOnly .rcbArrowCellRight {
    background-position: -162px -176px; }
  .RadComboBox .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -88px; }
  .RadComboBox .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -88px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbInputCellLeft {
    background-position: 0 -110px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbInputCellRight {
    background-position: 100% -110px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbInput {
    color: #b40000; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbArrowCellLeft {
    background-position: -180px -176px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbArrowCellRight {
    background-position: -198px -176px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -110px; }
  .RadComboBox .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -110px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbInputCellLeft {
    background-position: 0 -132px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbInputCellRight {
    background-position: 100% -132px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbInput {
    color: #000; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbArrowCellLeft {
    background-position: -216px -176px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbArrowCellRight {
    background-position: -234px -176px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -132px; }
  .RadComboBox .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -132px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbInputCellLeft {
    background-position: 0 -154px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbInputCellRight {
    background-position: 100% -154px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbInput {
    color: #9d9b7c; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbArrowCellLeft {
    background-position: -252px -176px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbArrowCellRight {
    background-position: -270px -176px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
    background-position: 0 -154px; }
  .RadComboBox .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    background-position: 100% -154px; }

.RadComboBoxDropDown {
  border-color: transparent;
  border-width:0px;
  color: #272722;
  background: #e7e3e7;
  font: normal 12px/16px "Segoe UI", Arial, Helvetica, sans-serif; }
  .RadComboBoxDropDown .rcbHeader,
  .RadComboBoxDropDown .rcbFooter {
    color: #272722;
    background-color: #dee0c8; }
  .RadComboBoxDropDown .rcbHeader {
    border-bottom-color: #959485; }
  .RadComboBoxDropDown .rcbFooter {
    border-top-color: #959485; }
  .RadComboBoxDropDown .rcbHovered {
    color: #fff;
    background: #888888; padding:5px 6px; }
  .RadComboBoxDropDown .rcbItem{ padding:5px 6px; }
  .RadComboBoxDropDown .rcbDisabled {
    color: #777777;
    background-color: transparent; }
  .RadComboBoxDropDown .rcbLoading {
    color: #272722;
    background: #d8fbbd; }
  .RadComboBoxDropDown .rcbItem em,
  .RadComboBoxDropDown .rcbHovered em {
    color: #272722;
    background: #d8fbbd; }
  .RadComboBoxDropDown .rcbCheckAllItems {
    color: #272722;
    background-color: #dee0c8; }
  .RadComboBoxDropDown .rcbCheckAllItemsHovered {
    color: #272722;
    background-color: #dee0c8; }
  .RadComboBoxDropDown .rcbMoreResults {
    border-top-color: #898772;
    color: #272722;
    background-color: #dee0c8; }
    .RadComboBoxDropDown .rcbMoreResults a {
      background-image: url('Common/radFormSprite.png');
      _background-image: url('Common/radFormSpriteIE6.png');
      background-position: -308px -181px; }
  .RadComboBoxDropDown .rcbSeparator {
    color: #ffffff;
    background: #8a8a8a; }
/* Combobox end */

I am using 'ASP.NET AJAX Q3 2013'.
I am using custom css in sharepoint 2010.

[Magdalena]

Hi Faisal,

Thank you for the provided CSS. Please, try to apply the padding to the td elements:

.RadComboBox td {
    padding: 4px;
}

 
instead to the table:

.RadComboBox table {
    padding: 4px!important;
}

I have tested it cross browser (including older IE) and it works so I hope this will resolve the issue.

Regards,
Magdalena
Telerik