RadComboBox limited width

1 Answer 26 Views
ComboBox Styling
Antoine
Top achievements
Rank 1
Antoine asked on 07 Feb 2022, 10:39 AM

Hi,

I'm using a RadComboBox but I'm having some problems when the width is more than 1000 pixels. (see capture)

Does anyone knows how to fix that ? Or should I limit the RadComboBox width to 1000 pixels ?

Thanks.

1 Answer, 1 is accepted

Sort by
1
Accepted
Vessy
Telerik team
answered on 09 Feb 2022, 12:42 PM

Hello Antoine,

Can you, please, share configuration of the RadComboBox leading to the result shown on the attached image? Below you can see the result i got with the following setup:

        <telerik:RadComboBox ID="RadCombobox1" runat="server" Width="1100px">
            <Items>
                <telerik:RadComboBoxItem Text="Item1" Value="Item1" />
                <telerik:RadComboBoxItem Text="Item2" Value="Item2" />
                <telerik:RadComboBoxItem Text="Item3" Value="Item3" />
            </Items>
        </telerik:RadComboBox>

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Antoine
Top achievements
Rank 1
commented on 09 Feb 2022, 01:08 PM

Here is the comboxbox integration :

What I think so far, is that the combobox background is an image (see capture below) and this image got a max-width of 1000px. Can you confirm that ?

 

Also, I've tried to set a width in pixels and not in percent. Got the same issue...

Vessy
Telerik team
commented on 09 Feb 2022, 01:42 PM

Hi,

Thank you for the additional details, Antoine. Your assumption is correct - it seems that you are using the ComboBox in Classic render mode, which uses background sprite with limited size. Basically, there are two possible ways to fix the faced problem:

  1. Switch to Lightweight render mode which uses CSS3 for the control backgrounds, but not sprites:
    https://docs.telerik.com/devtools/aspnet-ajax/general-information/controlling-visual-appearance/render-modes#setting-render-mode

  2. Create a custom background image (with bigger width) and apply it to the combobox in a similar way:
        <style>
            div.RadComboBox .rcbInputCell, 
            div.RadComboBox .rcbArrowCell {
                background-image: url("custom-bgr.png");
            }
        </style>

Antoine
Top achievements
Rank 1
commented on 09 Feb 2022, 02:01 PM

I've switched to Lightweight render mode and it works.

Thanks for your help :)

 

Vessy
Telerik team
commented on 09 Feb 2022, 02:22 PM

Great! You are welcome, Antoine :)
Tags
ComboBox Styling
Asked by
Antoine
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or