RadComboBox using a background-image that's not long enough

[Dean]

My combo box label gets cut off for some reason.

As far as I can see, the background-image uses this resource:

url('/WebResource.axd?d=D0XVlF4dZ6ZUgux5cKk7ZyPm2E6FIhaORkgtz3vriZu6rK_ZO-gRaPkBT_nfVuX88yBxnjVTz5mbU45Eb3S8dVJ5lHJBw5t82CsKyXb485mJzH9EpPeg2yFgd1jBroKGlq9gkpB2PXpYpBDpctx38I7oMVIPsmGoayYdbXGl7uA1&t=636123087020000000')

How would I extend the white label area to fill the rest of it? Or is there another way of implementing this dropdown menu without this resource, as it includes the background label area and the button on the right.

[Dean]

It looks fine when I use RenderMode="Lightweight" but I would prefer to not use it.

Would the only solution to use a custom background image and dropdown button image in place of the built-in resource? Unless that image can be stretched out somehow.

[Marin Bratanov]

Hi Eric,

You are correct in your findings:

• the supported, out-of-the-box way to avoid this is to use the Lightweight render mode - it does not use sprites, it uses CSS gradients instead, so such limitations don't apply (the sprite we created is 1000px wide, and for the era when the Classic rendering was created, that was plenty).
• if you want to keep using the Classic render mode, you will need to add a CSS rule to override the background-image of the combo and provide another sprite. For example, download ours and edit it to match your needs (e.g., stretch it so it is wider). I made a small example for you from the Default skin, here's some markup and below is a sample slice of the sprite that is now 2000px wide (I merely stretched it, you may want to do a better job in order to avoid stretching the rounded corners and shadows in the end, and if you don't use taller combox, you can trim it to above the arrow sprite).

  <style>
      .RadComboBox.RadComboBox_Default .rcbInputCell {
          background-image: url('new-wide-sprite.png');
      }
  </style>
  <telerik:RadComboBox runat="server" ID="rcb1" RenderMode="Classic" Width="100%" AllowCustomText="true"></telerik:RadComboBox>

 

Regards,
Marin Bratanov
Progress Telerik