This is a migrated thread and some comments may be shown as answers.

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

2 Answers 45 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 09 Nov 2018, 04:41 PM

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.

2 Answers, 1 is accepted

Sort by
0
Dean
Top achievements
Rank 1
answered on 09 Nov 2018, 05:35 PM

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.

0
Accepted
Marin Bratanov
Telerik team
answered on 12 Nov 2018, 06:29 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
Dean
Top achievements
Rank 1
Answers by
Dean
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or