MarkFirstMatch and Web20 Skin

[Brian Mains]

Hello,

When MarkFirstMatch is set to false, the web 20 skin renders the input box as all blue, whereas when MarkFirstMatch is true, it renders an input box as white.  Out of curiosity, why is that, and what specific skin sets the whole input area to a blue gradient?

Thanks.

[Kalina]

Hello Brian Mains,

When MarkFirstMatch is turned off the RadComboBox input in fact becomes "read-only" - and the explicit css class designed for a read-only input ("rcbReadOnly") is applied.
That is why the input looks different, however you can override this class if you want to change the input appearance.

Additionally you can test how the different skins color the input at this online demo.
(Simply switch MarkFirstMatch and change skins at "Change Skin" combobox.)

All the best,
Kalina
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Deepak]

Could you please show an example how to override rcbReadOnly css class?

Thanks

[Nencho]

Hi Brian,
 
In order to alter the text color of RadComboBox, when the rcbReadOnly class is applied I would suggest that you try using the following example:

//css

<style type="text/css">
       div.RadComboBox .rcbReadOnly .rcbInputCell .rcbInput {
           color: red;
       }
   </style>

//combobox declaration

<div>
          <telerik:RadComboBox runat="server" ID="RadComboBox1" Skin="Web20" AllowCustomText="false" MarkFirstMatch="false">
              <Items>
                  <telerik:RadComboBoxItem Text="Item 1" />
                  <telerik:RadComboBoxItem Text="Item 2" />
                  <telerik:RadComboBoxItem Text="Item 3" />
                  <telerik:RadComboBoxItem Text="Item 4" />
                  <telerik:RadComboBoxItem Text="Item 5" />
              </Items>
          </telerik:RadComboBox>
      </div>

Regards,
Nencho
the Telerik team

[Deepak]

Thanks for your reply.

I tried and it works but there is difference in the appearance. There is thick border coming inside the text 

Please see below HTML I used as suggested:- 

<style type="text/css"><br>       div.RadComboBox .rcbReadOnly .rcbInputCell .rcbInput {<br>           background:white;<br>       }

<telerik:RadComboBox runat="server" ID="ddlYear" CssClass="rcbInput" EmptyMessage="Type here ..." OnItemsRequested="ddlYear_ItemsRequested" <br>                DataTextField="Text" DataValueField="Value"  Skin="Web20"  OnClientItemsRequested="yearsLoaded" OnClientSelectedIndexChanged="yearChanged"> <br>            </telerik:RadComboBox>

Please let me know how to fix this issue.
Thanks,

[Nencho]

Hello Brian,

The RadComboBox uses a css sprite for its rendering. With altering the background style of the Input it only affect the Input area of the ComboBox, which is colored as white in your particular scenario.

The slight gap you had observed is the rest of css sprite, used by the RadComboBox and, as you could well guess, it could not be affected by the background styling of the combo.

Previous versions of the ComboBox, all the way to 2012 Q3, did not have different appearance for read/write and read only combos. However with the aforementioned release, we included improvements in the combobox, which you can see in this detailed forum thread -- http://www.telerik.com/community/forums/aspnet-ajax/combobox/possible-breaking-changes-2012-q3.aspx.

In short, we tweaked the styles so it's visible if a combo is read/write or read-only by tweaking the sprite. Our believe is that the improved appearance aids usability.

That said, if you would like to "revert" the looks that's possible with tweaking the sprite. While we do not recommend that, yet you could do it easily. If you encounter any difficulties, we could assist you by providing you with the proper sprite image.

Regards,
Nencho
the Telerik team

[Deepak]

Hello Nencho,

Yes I would like to revert it. Could you please guide me how to do it?

Thanks,
Deepak

[Nencho]

Hello Deepak,

As I can see from the attached screenshot, you are using the Windows7 Skin for rendering the RadComboBox. Therefor, we prepared for you the customization, regarding the aforementioned skin. Please find attachment with the modified sprite.


Kind regards,
Nencho
the Telerik team

[Deepak]

Dear Telerik support team,

It worked very well, thanks for your support.

Cheers,
Deepak

[AratiS]

I upgraded from version 2012.2.815.40 to version 2013.2.611.40. After upgrading I see a change in appearance of radcombo boxes (see images attached) the comboboxes appear gray in color. Is this because of the same issue mentioned in this post?. If so, can you please send me a fix for this issue, I am using Outlook skin for combo boxes.
Any help is appreciated.

Thanks,
Arati