RadCombobox rcbarrowcell image getting cut off after upgrading to Q2 2010

3 posts, 0 answers
  1. m chotu
    m chotu avatar
    10 posts
    Member since:
    Dec 2009

    Posted 04 Jan 2011 Link to this post

    Hi Telerik team;

    Currently we have a web page in our site which is using radcombobox and after we upgraded to Q2 2010, the arrow cell image is getting cut off.  We upgraded to .net 4.0 and the telerik to Q2 2010.  Could you please take a look and let me know what the problem is?  I tried setting EnableEmbeddedBaseStyleSheet = "false" and that did not fix it.

    Here is the way the radcombobox is declared on the page:

     

    <

     

     

    telerik:RadComboBox ID="cmbRegion" runat="server" AllowCustomText="false" MarkFirstMatch="false" DropDownWidth="222" Width="185" EnableVirtualScrolling="false" EnableEmbeddedBaseStylesheet="false">
    </telerik:RadComboBox>

     

     

     

     


    I have attached images of the radcombobox before upgrade and after upgrade which shows the arrow being cut off.

    Please see the stylesheet we are using for the radcombobox below:

    Thanks a lot in advance for your help,

    Meera

     

    .RadComboBox_Response

     

     

    *

     

     

     

     

     

    {

     

     

    margin:0;

     

     

     

    padding:0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    ,

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbInput,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

     

     

    {

     

     

    font:12px arial,verdana,sans-serif;

     

     

     

    color:#000;

     

    }

     

     

     

    /* combobox */

     

     

     

     

    .RadComboBox_Response

     

     

     

     

    {

     

     

    vertical-align:bottom;

     

     

     

    text-align: left;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    table

     

     

     

     

     

    {

     

     

    border:0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    td.rcbInputCell

     

     

     

     

     

    {

     

     

    background: url('ComboBox/rcbBg.gif') no-repeat 0 0;

     

     

     

    height:19px;

     

     

     

    line-height:20px;

     

     

     

    vertical-align:top;

     

     

     

    padding:0;

     

     

     

    border:0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    td.rcbInputCellRight

     

     

     

     

     

    {

     

     

    background-position: 100% 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbDisabled .rcbInputCell .rcbInput

     

     

     

     

     

    {

     

     

    color: #999;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbHovered .rcbInputCell { background-position: 0 -21px; }

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbHovered .rcbInputCellRight { background-position: 100% -21px; }

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbFocused .rcbInputCell { background-position: 0 -42px; }

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbFocused .rcbInputCellRight { background-position: 100% -42px; }

     

     

     

     

    .RadComboBox_Response

     

     

    td.rcbInputCell,

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbInputCell .rcbInput

     

     

     

     

     

    {

     

     

    padding: 0 0 0 2px;

     

    }

     

     

     

    .RadComboBox_Response_rtl

     

     

    td.rcbInputCell,

     

     

     

     

    .RadComboBox_Response_rtl

     

     

    .rcbInputCell .rcbInput

     

     

     

     

     

    {

     

     

    padding: 0 2px 0 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbInputCell .rcbInput

     

     

     

     

     

    {

     

     

    width:100%;

     

     

     

    background:transparent;

     

     

     

    vertical-align:top;

     

     

     

    height: 16px;

     

     

     

    border: 0;

     

     

     

    margin-top: 2px;

     

     

     

    outline: 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbInputCell .rcbEmptyMessage

     

     

     

     

     

    {

     

     

    color: #ccc;

     

     

     

    font-style: italic;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    td.rcbArrowCell

     

     

     

     

     

    {

     

     

    width:24px;

     

     

     

    padding:0;

     

     

     

    border:0;

     

     

     

    background:transparent url('ComboBox/rcbArrowCell.gif') no-repeat 0 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbArrowCellRight

     

     

     

     

     

    {

     

     

    background-position: 0 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbArrowCellLeft

     

     

     

     

     

    {

     

     

    background-position: 0 -21px;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbArrowCell a

     

     

     

     

     

    {

     

     

    line-height:21px;

     

     

     

    width:24px;

     

     

     

    height:21px;

     

     

     

    text-decoration:none;

     

     

     

    text-indent: -9999px;

     

     

     

    font-size: 0;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    td.rcbArrowCellHidden,

     

     

     

     

    .RadComboBox_Response

     

     

    .rcbArrowCellHidden a

     

     

     

     

     

    {

     

     

    background: url('ComboBox/rcbBg.gif') no-repeat top right;

     

     

     

    width: 1px;

     

    }

     

     

     

    .RadComboBox_Response_rtl

     

     

    .rcbArrowCell a

     

     

     

     

     

    {

     

     

    text-indent: 9999px;

     

    }

     

     

     

    .RadComboBox_Response

     

     

    .rcbDisabled .rcbArrowCell a

     

     

     

     

     

    {

     

     

    cursor:no-drop;

     

    }

     

     

     

    /* dropdown */

     

     

     

     

    .rcbSlide

     

     

     

     

    {

     

     

    position:absolute;

     

     

     

    overflow:hidden;

     

     

     

    display:none;

     

     

     

    _height:1px;

     

     

     

    float:left;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

     

     

    {

     

     

    position:absolute;

     

     

     

    background:#fff;

     

     

     

    border: 1px solid #8b9cac;

     

     

     

    cursor:default;

     

     

     

    font-size:11px;

     

     

     

    text-align: left;

     

    }

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

     

     

    {

     

     

    text-align: right;

     

     

     

    direction: rtl;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbScroll

     

     

     

     

     

    {

     

     

    overflow:auto;

     

     

     

    position:relative;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbList

     

     

     

     

     

    {

     

     

    list-style:none;

     

     

     

    margin:0;

     

     

     

    padding:0;

     

     

     

    zoom:1;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbHeader,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbFooter

     

     

     

     

     

    {

     

     

    background:#dfeeff;

     

     

     

    color:#000;

     

     

     

    padding:4px;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbHeader

     

     

     

     

     

    {

     

     

    border-bottom: 1px solid #a7c0df;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbFooter

     

     

     

     

     

    {

     

     

    border-top: 1px solid #a7c0df;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbNoWrap .rcbItem,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbNoWrap .rcbHovered,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbNoWrap .rcbDisabled,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbNoWrap .rcbLoading

     

     

     

     

     

    {

     

     

    white-space:nowrap;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbItem,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbHovered,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbDisabled,

     

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbLoading

     

     

     

     

     

    {

     

     

    padding:4px 20px 4px 4px;

     

     

     

    border-top: 1px solid #f0f2f3;

     

     

     

    min-height: 14px;

     

    }

     

     

     

    *

     

     

    html .RadComboBoxDropDown_Response .rcbItem,

     

     

     

     

    *

     

     

    html .RadComboBoxDropDown_Response .rcbHovered,

     

     

     

     

    *

     

     

    html .RadComboBoxDropDown_Response .rcbDisabled,

     

     

     

     

    *

     

     

    html .RadComboBoxDropDown_Response .rcbLoading

     

     

     

     

     

    {

     

     

    height: 14px;

     

    }

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

    .rcbItem,

     

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

    .rcbHovered,

     

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

    .rcbDisabled,

     

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

    .rcbLoading

     

     

     

     

     

    {

     

     

    padding:4px 4px 4px 20px;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbImage

     

     

     

     

     

    {

     

     

    vertical-align: middle;

     

     

     

    margin: 0 6px 2px 0;

     

    }

     

     

     

    .RadComboBoxDropDown_Response_rtl

     

     

    .rcbImage

     

     

     

     

     

    {

     

     

    margin: 0 0 2px 6px;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    em

     

     

     

     

     

    {

     

     

    font-style: normal;

     

     

     

    font-weight: bold;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbItem em

     

     

     

     

     

    {

     

     

    background: #e5e5e5;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbHovered

     

     

     

     

     

    {

     

     

    background:#f0f2f4;

     

     

     

    color:#000;

     

     

     

    border-top: 1px solid #d8dde0;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbSeparator

     

     

     

     

     

    {

     

     

    color: #222;

     

     

     

    background: #F4F4F4;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbDisabled

     

     

     

     

     

    {

     

     

    color:#808080;

     

     

     

    cursor:no-drop;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbLoading

     

     

     

     

     

    {

     

     

    background:#f0f0f0;

     

     

     

    text-align:center;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbMoreResults

     

     

     

     

     

    {

     

     

    clear:both;

     

     

     

    background:#E0E3E6;

     

     

     

    border-top: 1px solid #c7c7c7;

     

     

     

    padding:4px;

     

     

     

    text-align:center;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbMoreResults a

     

     

     

     

     

    {

     

     

    display:block;

     

     

     

    width:9px;

     

     

     

    height:6px;

     

     

     

    background:url('ComboBox/rcbMoreResults.gif') no-repeat transparent;

     

     

     

    margin:0 auto 4px;

     

     

     

    text-indent:-3333px;

     

     

     

    overflow:hidden;

     

     

     

    text-decoration:none;

     

     

     

    cursor:pointer;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbMoreResults a:hover

     

     

     

     

     

    {

     

     

    background-position:0 -6px;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbMoreResults span

     

     

     

     

     

    {

     

     

    display:block;

     

     

     

    text-align:center;

     

    }

     

     

     

    .RadComboBoxDropDown_Response

     

     

    .rcbScroll

     

     

     

     

     

    {

     

     

    scrollbar-face-color: #e9e9e9;

     

     

     

    scrollbar-highlight-color: #ffffff;

     

     

     

    scrollbar-shadow-color: #e9e9e9;

     

     

     

    scrollbar-3dlight-color: #dbdbdb;

     

     

     

    scrollbar-arrow-color: #787878;

     

     

     

    scrollbar-track-color: #f5f5f5;

     

     

     

    scrollbar-darkshadow-color: #aeaeae;

     

    }

     

     

     

    /*hacks*/

     

     

     

     

    /*Opera start*/

     

     

     

     

    @media

     

     

    screen and (min-width:550px)

     

    {

     

     

    .RadComboBoxDropDown_Response_rtl .rcbItem,

     

     

     

    .RadComboBoxDropDown_Response_rtl .rcbHovered,

     

     

     

    .RadComboBoxDropDown_Response_rtl .rcbDisabled,

     

     

     

    .RadComboBoxDropDown_Response_rtl .rcbLoading

     

     

     

     

     

    {

     

     

    padding:4px 20px 4px 4px;

     

     

     

    zoom:1;

     

    }

    }

     

     

     

    /*Opera end*/

     

     

     




  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Jan 2011 Link to this post

    Hello m chotu,

    This could happen if you are upgrading from a 2008-version to a more recent one.

    The <td> and <a> elements inside the arrow cell are missing their width. You could resolve the problem with such a CSS:
    div.RadComboBox .rcbArrowCell td,
    div.RadComboBox .rcbArrowCell a
    {
        width: 23px;
    }

    I hope this helps.

    Regards,
    Simon
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. m chotu
    m chotu avatar
    10 posts
    Member since:
    Dec 2009

    Posted 05 Jan 2011 Link to this post

    Hi Simon;

    I tried your suggestion and also added !important after the width like this:

    div.RadComboBox .rcbArrowCell td,
    div.RadComboBox .rcbArrowCell a
    {
        width: 23px !important;
    }

    This worked!!!

    Thanks a lot;

    Meera

Back to Top