Issue with Rad Combobox

2 posts, 0 answers
  1. ATCHUTA
    ATCHUTA avatar
    1 posts
    Member since:
    Jul 2015

    Posted 17 Jul 2015 Link to this post

    I am using rad combo box in my application.  By default I have to show this control as disabled, but there is some distortion while showing this combo box. Please see the screenshot attached(rcb_disabled.jpg).

    when I select normal checkbox this dropdown will get enabled. even in enabled mode also this dropdown still distorted.Please find the screenshot(rcb_enabled.jpg) 

    I think it may be a .css issue, but I couldn't figure out what is the exact issue. Please find the css file below.

    001./* RadComboBox Default skin */
    002. 
    003./*global*/
    004. 
    005..RadComboBox_Grid, .RadComboBox_Grid .rcbInput, .RadComboBoxDropDown_Grid
    006.{
    007.    font: 12px "Segoe UI", Arial, sans-serif;
    008.    color: #333;
    009.}
    010. 
    011./* combobox */
    012. 
    013..RadComboBox_Grid .rcbInputCellLeft, .RadComboBox_Grid .rcbInputCellRight, .RadComboBox_Grid .rcbArrowCellLeft, .RadComboBox_Grid .rcbArrowCellRight
    014.{
    015.    background-image: url('/ZippyPlus/Themes/ComboBox/rcbSprite.png');
    016.}
    017. 
    018.* html .RadComboBox_Grid .rcbInputCellLeft, * html .RadComboBox_Grid .rcbInputCellRight, * html .RadComboBox_Grid .rcbArrowCellLeft, * html .RadComboBox_Grid .rcbArrowCellRight
    019.{
    020.    background-image: url('/ZippyPlus/Themes/ComboBox/rcbSpriteIE6.png');
    021.}
    022. 
    023..RadComboBox_Grid td.rcbInputCellLeft
    024.{
    025.    background-position: 0 0;
    026.}
    027..RadComboBox_Grid td.rcbInputCellRight
    028.{
    029.    background-position: 100% 0;
    030.}
    031. 
    032..RadComboBox_Grid .rcbHovered .rcbInputCellLeft
    033.{
    034.    background-position: 0 0;
    035.}
    036..RadComboBox_Grid .rcbHovered .rcbInputCellRight
    037.{
    038.    background-position: 100% 0;
    039.}
    040. 
    041..RadComboBox_Grid .rcbFocused .rcbInputCellLeft
    042.{
    043.    background-position: 0 0;
    044.}
    045..RadComboBox_Grid .rcbFocused .rcbInputCellRight
    046.{
    047.    background-position: 100% 0;
    048.}
    049. 
    050..RadComboBox_Grid .rcbHovered .rcbReadOnly td.rcbInputCellLeft
    051.{
    052.    background-position: 0 -24px;
    053.}
    054..RadComboBox_Grid .rcbHovered .rcbReadOnly td.rcbInputCellRight
    055.{
    056.    background-position: 100% -24px;
    057.}
    058. 
    059..RadComboBox_Grid .rcbFocused .rcbReadOnly td.rcbInputCellLeft
    060.{
    061.    background-position: 0 -46px;
    062.}
    063..RadComboBox_Grid .rcbFocused .rcbReadOnly td.rcbInputCellRight
    064.{
    065.    background-position: 100% -46px;
    066.}
    067. 
    068..RadComboBox_Grid .rcbInputCell .rcbEmptyMessage
    069.{
    070.    color: #666;
    071.}
    072. 
    073..RadComboBox_Grid .rcbHovered .rcbInputCell .rcbInput
    074.{
    075.    color: #000;
    076.}
    077. 
    078..RadComboBox_Grid td.rcbArrowCellLeft
    079.{
    080.    background-position: -18px -90px;
    081.}
    082..RadComboBox_Grid td.rcbArrowCellRight
    083.{
    084.    background-position0px -90px;
    085.}
    086. 
    087..RadComboBox_Grid .rcbHovered .rcbArrowCellLeft
    088.{
    089.    background-position: -54px -90px;
    090.}
    091..RadComboBox_Grid .rcbHovered .rcbArrowCellRight
    092.{
    093.    background-position: -36px -90px;
    094.}
    095. 
    096..RadComboBox_Grid .rcbFocused .rcbArrowCellLeft
    097.{
    098.    background-position: -90px -90px;
    099.}
    100..RadComboBox_Grid .rcbFocused .rcbArrowCellRight
    101.{
    102.    background-position: -72px -90px;
    103.}
    104. 
    105..RadComboBox_Grid td.rcbArrowCellHidden, .RadComboBox_Grid .rcbHovered td.rcbArrowCellHidden, .RadComboBox_Grid .rcbFocused td.rcbArrowCellHidden
    106.{
    107.    background-position: -15px -90px;
    108.}
    109. 
    110..RadComboBox_Grid_rtl td.rcbArrowCellHidden, .RadComboBox_Grid_rtl .rcbHovered td.rcbArrowCellHidden, .RadComboBox_Grid_rtl .rcbFocused td.rcbArrowCellHidden
    111.{
    112.    background-position: -18px -90px;
    113.}
    114. 
    115./* Read-only styles */
    116. 
    117..RadComboBox_Grid .rcbReadOnly td.rcbArrowCellLeft
    118.{
    119.    background-position: -18px -90px;
    120.}
    121..RadComboBox_Grid .rcbReadOnly td.rcbArrowCellRight
    122.{
    123.    background-position: -2px -90px;
    124.}
    125. 
    126..RadComboBox_Grid .rcbHovered .rcbReadOnly .rcbArrowCellLeft
    127.{
    128.    background-position: -54px -90px;
    129.}
    130..RadComboBox_Grid .rcbHovered .rcbReadOnly .rcbArrowCellRight
    131.{
    132.    background-position: -38px -90px;
    133.}
    134. 
    135..RadComboBox_Grid .rcbFocused .rcbReadOnly .rcbArrowCellLeft
    136.{
    137.    background-position: -90px -90px;
    138.}
    139..RadComboBox_Grid .rcbFocused .rcbReadOnly .rcbArrowCellRight
    140.{
    141.    background-position: -74px -90px;
    142.}
    143. 
    144..RadComboBox_Grid .rcbReadOnly td.rcbArrowCellHidden
    145.{
    146.    background-position: -15px -90px;
    147.}
    148..RadComboBox_Grid .rcbHovered .rcbReadOnly td.rcbArrowCellHidden
    149.{
    150.    background-position: -51px -90px;
    151.}
    152..RadComboBox_Grid .rcbFocused .rcbReadOnly td.rcbArrowCellHidden
    153.{
    154.    background-position: -87px -90px;
    155.}
    156. 
    157..RadComboBox_Grid_rtl .rcbReadOnly td.rcbArrowCellHidden
    158.{
    159.    background-position: -18px -90px;
    160.}
    161..RadComboBox_Grid_rtl .rcbHovered .rcbReadOnly td.rcbArrowCellHidden
    162.{
    163.    background-position: -54px -90px;
    164.}
    165..RadComboBox_Grid_rtl .rcbFocused .rcbReadOnly td.rcbArrowCellHidden
    166.{
    167.    background-position: -90px -90px;
    168.}
    169. 
    170./* dropdown */
    171. 
    172..RadComboBoxDropDown_Grid .rcbHeader, .RadComboBoxDropDown_Grid .rcbFooter, .RadComboBoxDropDown_Grid .rcbMoreResults a
    173.{
    174.    background-image: url('/ZippyPlus/Themes/ComboBox/rcbSprite.png');
    175.}
    176. 
    177.* html .RadComboBoxDropDown_Grid .rcbHeader, * html .RadComboBoxDropDown_Grid .rcbFooter, * html .RadComboBoxDropDown_Grid .rcbMoreResults a
    178.{
    179.    background-image: url('/ZippyPlus/Themes/ComboBox/rcbSpriteIE6.png');
    180.}
    181. 
    182..RadComboBoxDropDown_Grid
    183.{
    184.    background: #fff;
    185.    border-color: #868686;
    186.    color: #00156e;
    187.}
    188. 
    189..RadComboBoxDropDown_Grid .rcbHeader, .RadComboBoxDropDown_Grid .rcbFooter
    190.{
    191.    background-color: #f1f2f4;
    192.    background-position: 0 -110px;
    193.}
    194. 
    195..RadComboBoxDropDown_Grid .rcbHeader
    196.{
    197.    border-bottom-color: #d5d5d5;
    198.}
    199. 
    200..RadComboBoxDropDown_Grid .rcbFooter
    201.{
    202.    border-top-color: #d5d5d5;
    203.}
    204. 
    205..RadComboBoxDropDown_Grid .rcbItem em
    206.{
    207.    background: #e5e5e5;
    208.}
    209. 
    210..RadComboBoxDropDown_Grid .rcbHovered
    211.{
    212.    background: #ffe27b;
    213.    color: #000;
    214.}
    215. 
    216..RadComboBoxDropDown_Grid .rcbSeparator
    217.{
    218.    background: #fcc365;
    219.    color: #000;
    220.}
    221. 
    222..RadComboBox_Grid .rcbDisabled .rcbInputCell .rcbInput, .RadComboBoxDropDown_Grid .rcbDisabled
    223.{
    224.    color: #999;
    225.}
    226. 
    227..RadComboBox_Grid .rcbDisabled td.rcbInputCellLeft
    228.{
    229.    background-position: 0 -68px;
    230.}
    231..RadComboBox_Grid .rcbDisabled td.rcbInputCellRight
    232.{
    233.    background-position: 100% -68px;
    234.}
    235..RadComboBox_Grid .rcbDisabled td.rcbArrowCellLeft
    236.{
    237.    background-position: -126px -90px;
    238.}
    239..RadComboBox_Grid .rcbDisabled td.rcbArrowCellRight
    240.{
    241.    background-position: -108px -90px;
    242.}
    243..RadComboBox_Grid .rcbDisabled .rcbReadOnly td.rcbArrowCellRight
    244.{
    245.    background-position: -110px -90px;
    246.}
    247..RadComboBox_Grid table.rcbDisabled td.rcbArrowCellHidden, .RadComboBox_Grid .rcbDisabled .rcbReadOnly td.rcbArrowCellHidden
    248.{
    249.    background-position: -123px -90px;
    250.}
    251..RadComboBox_Grid_rtl table.rcbDisabled td.rcbArrowCellHidden, .RadComboBox_Grid_rtl .rcbDisabled .rcbReadOnly td.rcbArrowCellHidden
    252.{
    253.    background-position: -126px -90px;
    254.}
    255. 
    256..RadComboBoxDropDown_Grid .rcbLoading
    257.{
    258.    background: #f0f0f0;
    259.}
    260. 
    261..RadComboBoxDropDown_Grid .rcbMoreResults
    262.{
    263.    border-top-color: #c6c7d2;
    264.    background-color: #fff;
    265.    color: #8d8d8d;
    266.}
    267. 
    268..RadComboBoxDropDown_Grid .rcbMoreResults a
    269.{
    270.    background-position: -157px -94px;
    271.}
    272. 
    273. 
    274.DIV.RadComboBox_Grid .rcbInputCell
    275.{
    276.    height: 15px; /* 18 */
    277.}
    278. 
    279.DIV.RadComboBox_Grid .rcbInput
    280.{
    281.    font-size: 14px;
    282.}
    283. 
    284.DIV.RadComboBox_Grid .rcbArrowCell
    285.{
    286.    height: 15px; /* 18 */
    287.    font-size: 12px;
    288.}
    289. 
    290.DIV.RadComboBoxDropDown_Grid .rcbHeader
    291.{
    292.    font-size: 14px;
    293.    font-weight: bold;
    294.}
    295. 
    296.DIV.RadComboBoxDropDown_Grid .rcbItem
    297.{
    298.    font-size: 12px;
    299.}
    300. 
    301. 
    302. 
    303./* Custom */
    304. 
    305.div.RadComboBox_Grid table .rcbInputCell,
    306.div.RadComboBox_Grid table .rcbArrowCell
    307.{
    308.    height: 15px;   
    309.    line-height: 14px
    310.    padding: 0;
    311.}
    312. 
    313.div.RadComboBox_Grid table .rcbInputCell input,
    314..statusCellReadOnly 
    315.
    316.    height: 15px
    317.    line-height: 14px
    318.    font:12px arial,verdana,sans-serif;  
    319.    padding: 0
    320.
    321.   
    322..RadComboBox_Grid .rcbInput,
    323..RadComboBox_Grid .rcbArrowCell A 
    324.
    325.    height: 15px !important
    326.

    NOTE: as I couldn't attach css file I changed the extension to png. please change the extension back to css to view the Combobox.Grid css file.

    Please help me on this issue.

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 21 Jul 2015 Link to this post

    Hello,

    It seems that there is set a custom height to elements of the control which breaks the layout. If this is your case, the solution is to set the render mode property to lightweight.

    We have applied the CSS to a sample project, but the issue did not reproduce. We are sending you this screen shot of the control after applying the styles. Could you please open a support ticket to be able to provide us with a runnable sample project where the issue will be reproduce? When we are able to test it locally, we can assist you in more efficient way.

    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top