ComboBox Drop Down Location

[Brian Mains]

Hello,

The drop down of the combo is aligned with the left side of the drop down text box.  Is it possible to align it with the right side of the combo text box or arrow?  I need it to flow more to the left.

Thanks.

[Princy]

Hi Brian Mains,

Try adding the below CSS in order to align the RadComboBoxItems to right.

CSS:

<style type="text/css">
.RadComboBox_Default,
.RadComboBox_Default .rcbInputCell .rcbInput,
.RadComboBoxDropDown_Default
{
    font:12px arial,verdana,sans-serif;
    color:#000;
    text-align : right !important;
}
</style>

Also RadComboBox fully supports right-to-left (RTL) language locales. The only thing you need to do is to mark the combobox instance with dir="rtl".

Thanks,
Princy.

[Revital Keren]

Hi Princy,
I have the same problem as described in here, and I have already tried your solution which unfortunately  made no change.
My RadComboBox is part of the GridDropDownColumn.
I have set the following values to the combo (where ddl is the instace od RadcComboBox which is customized inside the ItemDataBound event):

ddl.Width =

Unit.Percentage(90);

 

ddl.Skin =

"ReformaSkin";

 

ddl.DropDownWidth =

Unit.Percentage(100);

 

ddl.Style[

"dir"] = "rtl";

 I have also a custom skin ("ReformaSkin") which I use and have set your style suggestion in there.
my text is aligned just fine to the right inside the dropdownlist, but the problem is that it's width is overflowing to the right (instaed of overflowing to the left).
I have tried a lot of manipulating with no avail.
Please help (it looks really bad on my page..)!!!
I have to present it to the client TOMORROW!!!


thanx,
Revital

 

[Simon]

Hello Revital Keren,

You could achieve your goal by setting the OffsetX property to the difference between the Width and the DropDownWidth of the ComboBox.

However, in order for this approach to work properly you will need to define the latter two properties in pixels and not in percentage. At last but not least, the value of the OffsetX property must be an integer (i.e. 20, -3) in quotation marks.

I hope this helps.

Sincerely yours,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Revital Keren]

Hi Simon,
Thank u for your quick reply.
My problem is that I build my grid dynamically (same code for different grids) and that my client display settings may be different than mine, so that setting a hrad coded value of pixels instead fo percentage seems very problematic...
Isn't there a way of doing just that with the use of percentage?

thanks,
Revital

[Revital Keren]

Hi
Can you insert it to your TODO list to add a property for DropDownFloatDir which gets left or right floating direction.
while looking for a solution and browsing the forums , I have seen this request many times...

In the meanwhile there is still no solution to my problem, and I have noticed that the right most combo in my grid is floating to the right and dissapears from the screen ,adding horizontal scrolls, (on each click it floats some more to the right).

I'm really in a mass :( , and I really do think this property is needed.

waiting for a response,
Revital

[Simon]

Hi Revital Keren,

Thank you for getting back to me.

Currently RadComboBox does not support this functionailty out-of-the-box. If the demand for it increases in the future we may consider incorporating it in the control.

For now, since the server-side approach is inapplicable in your case, please use the following client-side approach - handle the OnClientDropDownOpening event as shown below:

Simon

[Revital Keren]

mmm.... nothing is hown below...

[Simon]

Hi Revital Keren,

Please excuse me for the omission.

Here is the code:

function onDropDownOpening(sender, eventArgs)
{
    var dropDownElement = sender.get_dropDownElement();
    var dropDownElementContainer = dropDownElement.parentNode;

    if (dropDownElement.style.width != "")
    {
        dropDownElementContainer.style.display = dropDownElement.style.display = "block";

        var dropDownWidth = dropDownElement.offsetWidth;
        var width = sender.get_element().offsetWidth;

        dropDownElementContainer.style.display = dropDownElement.style.display = "none";

        var offsetX = width - dropDownWidth;

        sender.set_offsetX(offsetX);
    }
}

All the best,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Revital Keren]

Hi Simon,
Thank u very much for the code, unfortunatelly it didn't do the trick.
since dropDownElement.style.width == "" all the time (I'm reminding you I am not setting width in px, but rather in percentage).
Is there any way for me to fix this behavior?

[Simon]

Hello Revital Keren,

Thank you for getting back to me.

The DropDownWidth server-side property sets the style.width attribute of the drop down in pixels. Even if it specified on the server in other Unit, it will be serialized in pixels. 

Could you provide me with a page where the approach does not work, so that I can inspect it?

Greetings,
Simon