Posted 18 Oct 2012
Link to this post
With this [2012 Q3] release we have improved the ComboBox by tweaking bits and pieces of the styles, yet those changes may be considered breaking.
As a part of ongoing effort to unify the looks of the controls, we have changed the looks of the ComboBox to resemble the related RadControls more closely. Namely, the arrow (button) part of the ComboBox looks more button-esque and the input part looks more input-ish.
It should be noted that with the default settings (or with AllowCustomText="false") the entire combo will look like a button even in normal state and not only on hover / focus.
You can check the attached screenshot (combobox-changes.png) of how the ComboBox looks with the Default skin. The top two rows show the combo in enable state and the bottom two rows show it in disabled state.
Initially, not all skins had design for all four interactive states (normal, hover, focused, disabled), so for this release, we have added them all. True, some [states] may not be as visible and prominent as others and you can expect some improvements in that area.
The above is obviously not possible without a change in the sprite and we have a couple of important changes here as well.
1) All four interactive states, both for the input-ish part and button-esque part of the ComboBox are included in that order -- input (normal, hover, focused, disabled), button (normal, hover, pressed, disabled).
2) We have decreased the width of the sprite from 2000px to 1000px. That's perhaps the most breaking change. If someone runs into the trouble of having a wider combo, we'll assist by providing the relevant sprite.
Check the attached image (radFormSprite.png) to see more details about the changes in the sprite configuration.
Note that we plan to use such sprite images as our main sprite image, but we'll see how this will go.
The ComboBox had some differences with the rest of the inputs in terms of padding. We have fixed that: now the ComboBox input (the surrounding cell actually) has padding on both sides.
Wit some skins the combo had about 1 (one) pixel displacement of the arrow in certain cases. We resolved that issue too, by providing an extra part of the sprite.
Again, you can check the image (combobox-metrics.png) for details about those changes. Note that this image is magnified for times and we have included a reference pixel.
We tweaked the design time HTML a bit, so the combobox does not stretch to the full 100% of the available space, but rather takes as much as its default width i.e. 160 pixels.
Label elements for checkboxes
When the checkboxes are enabled, there are additional LABEL elements rendered to wrap the checkbox and item text. That allows the users to check / uncheck an item when they click on its text.
When in browser that understand the immediate descendant selector (>) the label will be as wide as combobox dropdown. In the rest of the cases (just IE6) the label is as wide as the text.