radcombobox css on ie10

5 posts, 0 answers
  1. Loyal User
    Loyal User avatar
    37 posts
    Member since:
    Apr 2012

    Posted 03 Mar 2014 Link to this post

    hi,
    radcombobox doesn't display properly on ie10
  2. faisal
    faisal avatar
    7 posts
    Member since:
    Jun 2010

    Posted 04 Mar 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 Mar 2014 Link to this post

    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

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  5. faisal
    faisal avatar
    7 posts
    Member since:
    Jun 2010

    Posted 04 Mar 2014 in reply to Magdalena Link to this post

    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.






  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 05 Mar 2014 Link to this post

    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

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017