Issue with Rad Combobox

[ATCHUTA]

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-position:  0px -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.

[Magdalena]

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