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

[Solved] ComboBox renders Horizontal Scrollbar that blocks bottom item in IE9

10 Answers 186 Views

ComboBox

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

This question is locked. New answers and comments are not allowed.

10 Answers, 1 is accepted

answered on 26 Mar 2012, 01:50 PM

Hi Matt,

I am not sure how to reproduce this problem. If you open the ComboBox online demos and reduce the component's width from the configuration panel, so that a horizontal scrollbar appears, you will be able to scroll to and see the last item.

http://demos.telerik.com/aspnet-mvc/ComboBox

If the issue persists, please send me a runnable example and I will investigate further.

Kind regards,
Dimo
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

answered on 29 Mar 2012, 01:39 PM

Dimo,

Thanks for the response. We eventually tracked this down to the line-height CSS property.

In our reset.css this was being explicitly set as line-height: 1; The issue only seems to arise in IE9, but with line-height set to 1 we got the horizontal scrollbars.

Changing the line-height to ‘normal’ (which should mean basically the same thing as far as I can tell) the problem has disappeared.

Might be worth looking at adding an explicit line-height: normal to the classes applied to drop-down and autocomplete’s on IE9 (or a little play around to work our precisely what causes this).

Kind regards,

Matt

answered on 21 Jun 2012, 06:29 PM

I have the exact same issue (without the line-height being set anywhere explicitly). The scrollbar blocks the last item, and if there are only two items in the list it makes it nearly impossible to select the last item and it is definitely not user friendly in any way. It doesn't matter how long I make the drop down width (i have tried at 500px just for kicks) and it still renders the horizontal scrollbar. The text being displayed is being trimmed so it is not even taking up the additional space.

I am creating a new select list in the model and adding it to the viewdata, which is then used to bind to the select list.

private void _BindSupplierSelectList()

{

var suppliers = mUnitOfWork.SupplierRepository.Get(

orderBy: q => q.OrderBy( i => i.SupplierName ) );

ViewData["Supplier_Data"] = new SelectList( (IEnumerable)suppliers, "SupplierId", "SupplierName" );

}

@( Html.Telerik().DropDownList()

.Name("DropDownList_Suppliers")

.BindTo( (SelectList)ViewData["Supplier_Data"] )

.CascadeTo( "DropDownList_Categories" )

.DropDownHtmlAttributes( new { style="width:200px" } ))

One interesting thing that might lead someone to the cause is that when I set the htmldropdownattributes with a width of "auto", the width is basically 1 with a tiny and impossible to read drop down (no room to even select an item).

Has anyone figured this out yet??

Thanks!

answered on 02 Jul 2012, 07:41 PM

I had the same issue on my Win 7 / IE 9 machine, while another developer on our team did not. It took a while, but we tracked down the differences, and it turns out I had previously unchecked the "Display intranet sites in compatibility view" under the Tools->Compatibility View settings.

On my machine, checking that box and turning compatibility mode back on for intranet sites made the scroll bars go away. Hope it helps.

Jeff

EDIT: After further testing, though turning on compatibility mode did fix the scroll bar issue, it made the app look uglier in other places, so that won't be a solution for us after all. ;-) Also, it seems to be specific to my machine as another developer on our team does not have the issue. I'm not able to figure out what's different between the machines though.