Dropdownlist height problem using Form Decorator

[Amol]

Hello,

I am using asp.net DropDownList and RadFormDecorator on form ,
I am unable to set dropDownList height or enable to set scroll bars. 

Here is my test code,

 <telerik:RadFormDecorator runat="server" ID="rad" DecoratedControls="All"/>
        <asp:DropDownList ID="ddlTest" runat="server">
        <asp:ListItem Text="11212122"></asp:ListItem>
        <asp:ListItem Text="1121fd122"></asp:ListItem>
        <asp:ListItem Text="1121fs122"></asp:ListItem>
        <asp:ListItem Text="1121sdf22"></asp:ListItem>
        <asp:ListItem Text="1121f2122"></asp:ListItem>
        <asp:ListItem Text="1121f2122"></asp:ListItem>
        <asp:ListItem Text="112121df"></asp:ListItem>
        <asp:ListItem Text="11212d22"></asp:ListItem>
        <asp:ListItem Text="112df122"></asp:ListItem>
        <asp:ListItem Text="112sgh22"></asp:ListItem>
        <asp:ListItem Text="1121gh22"></asp:ListItem>
        <asp:ListItem Text="112er122"></asp:ListItem>
        <asp:ListItem Text="11er2122"></asp:ListItem>
        <asp:ListItem Text="11er2122"></asp:ListItem>
        <asp:ListItem Text="112erer2"></asp:ListItem>
        <asp:ListItem Text="11212e22"></asp:ListItem>
        <asp:ListItem Text="11e1e122"></asp:ListItem>
        <asp:ListItem Text="112e2h22"></asp:ListItem>
        <asp:ListItem Text="11e1h122"></asp:ListItem>
        <asp:ListItem Text="1121h122"></asp:ListItem>
        <asp:ListItem Text="1121e122"></asp:ListItem>
        <asp:ListItem Text="11w1h122"></asp:ListItem>
        <asp:ListItem Text="112h2122"></asp:ListItem>
        <asp:ListItem Text="1121e122"></asp:ListItem>
        <asp:ListItem Text="11sh2122"></asp:ListItem>
        <asp:ListItem Text="11212122"></asp:ListItem>
        <asp:ListItem Text="112f2122"></asp:ListItem>
        <asp:ListItem Text="11212fg2"></asp:ListItem>
        <asp:ListItem Text="1121dfg2"></asp:ListItem>
        <asp:ListItem Text="11212122"></asp:ListItem>
        <asp:ListItem Text="1dfg2122"></asp:ListItem>
        <asp:ListItem Text="1121dfg2"></asp:ListItem>
        <asp:ListItem Text="1121d122"></asp:ListItem>
        </asp:DropDownList>

Can you please tell me how do I set height of  DropDownList or enable scrollbars.

I am using telerik Q2 2009 released.

Thanks,
Amol Wable

[Martin]

Hi Amol,

Well, I must admit that this is a negligence on our side, and it will be fixed with the service pack. Until it is released, you may use the following fix:

.rfdSelectBox
{
 height: 100px;
 overflow: hidden;
}

You can set the most suitable height of the dropdown through the height property. 100 pixels is for reference only.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[alexandrupaul]

I have tried this workaround on Q2, i don't know if in Q3 this issue is resolved.
But in firefox when draging the scrollbar there is a problem, i mean when you try to drag the scroll up and down firefox shows the drag icon like you try to move an image.
On IE8 works as expected.

Thank you.
I hope you understand what i mean, please tell me if this issues are resolved in Q3

[Martin]

Hello Alexandru Paul Papuc,

No, the height scrollbar fix of the dropdowns is not yet added RadFormDecorator. The reason is that under different browsers, the height in which a scrollbar appears dropdowns is different and we have not yet decided on a unified height.

Furthermore - I just tested the behavior you have specified on our online examples in the latest version of FireFox, and the scrollbars drag and drop as expected. Can you please give us more information about the problem, steps to reproduce this at our side or give us your version of FireFox so we are able to help? If you are testing on your own project, make sure you exclude all of your custom styles, because the issue may be caused by inherited global style.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[alexandrupaul]

I don't use any global scripts that alter the select tag.
I have looked on online demos but i could not find at formdecorator an example wich shows a dropdownlist with a scroll in it.
On RadComboBox works as expected, but when i use a dropdownlist , formdecorator and height resolver the scroll problem arise. It's not a big deal but i am used (as many others) to drag scoll up and down :) and there is not working on Firefox (3.5.30729)

If you could provide me the url with the example of dropdownlist with scroll bars and form decorator because i can't find it.

Thanks.

[Martin]

Hello Alexandru Paul Papuc,

There is not a demo of a skinned selectbox with items overflow because this is not a core feature of the control, however you can easily create one by:

1. Add a selectbox with many items.
2. Put the CSS I gave you a couple of days ago in the <head /> section of your page.

But again - I was not able to reproduce the issue you are experiencing. When I mentioned global styles, I did not have in mind any <select /> rules, because such would not affect the skinned selectboxes, because they do not have anything in common with the real selectboxes - they are just a <a /> tag next to the <select />. The issue you are facing may be caused by relatively or absolutely positioned parents, etc. Try to exclude your own stylesheets and check if the problem persists. I tested it with different versions, and I cannot reproduce the problem.

For your convenience I am sending you a sample page with overflown selectbox items.

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[alexandrupaul]

Hi

I have tried the example page that you have submited.
It's the same. i have the latest version of firefox. when i try to drag the scroll button it's showing like i am trying to drag an image.
i have post a picture :).

Thanks.

[Martin]

Hi Alexandru Paul Papuc,

As I mentioned already, I am unable to reproduce the problem with FireFox, so I think it will be best if you send me a sample project where it can be observed. Please, make sure the project is fully runnable and do not forget to include your CSS and layout, because as I have mentioned the issue may be caused by global styles - for example some sort of positioning, etc.

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joel]

Are there any updates or alternate solutions for this?   I used the css code you suggested, but my problem is this.  I have two dropdown lists on a page.  First one has 3 choices, second one has approx 300.  If I make the height 200 which is about right for the long list, it makes the short list look terrible.  It would be nice to mimic the behavior of of the default microsoft dropdownlist for dynamic height.

[Georgi Tunev]

Hello Joel,

Currently there is still no suitable solution that would produce consistent result in all major browsers, but we are working on it. For convenience I created a public issue in our system and you can track the progress on that feature via the PITS (issue ID:2146).



Kind regards,
Georgi Tunev
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.