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.