DropDownList items width

[Ro]

Hi, 

I have a DropDownList that is opened in a grid cell.
I want that  when I open the DropDownList, the width of each item will be of the largest item.
My CSS:

 .k-list-container {
  width: auto !important;
}

.k-list-container .k-list .k-item {
  padding-left: 25px;
}

It doesn't work as expected. It takes the largest item length, but in some grids it adds more space so it's longer than it should be.
(it's not the padding-left: that's for the scroll).

Thanks

[Ivan Zhekov]

I have created a really simple page with your styles and two dropdowns, On that page things work flawlessly.

Can you built ontop my example -- http://dojo.telerik.com/@joneff/ItEgO -- so that the issue is always exhibited and we can debug it? Without actual working sample everything we say will be guesses at best.

Regards,
Ivan Zhekov
Telerik

 

 

[Ro]

Hi,

Please look at this example, In Category field:

http://dojo.telerik.com/uPulU

Thanks

 

[Ivan Zhekov]

That appears to be a side effect of using OData instead of, say jasonp.

I've updated my sample to reflect that: http://dojo.telerik.com/@joneff/ItEgO.


Regards,
Ivan Zhekov
Telerik

 

 

[Ro]

I think you're right.

How can I manage the ddl width in that case?

 

[Ivan Zhekov]

I've update the snippet once again. At least in my case it does work.

The new styles are:

.k-popup.k-list-container > div{
    overflow: none!important;
    overflow-y: scroll!important;
}

Regards,
Ivan Zhekov
Telerik

 

 

[Ro]

Thanks for your answer.
This solves a problem when there is not enough space.

But my case is the opposite - there is too much space,
you can see in the attached file.

Thanks ahead!

 

 

 

[Iliana Dyankova]

Hi Ro,

To achieve the expected you should set width: auto to the .k-list-container. For your I updated your example.  

Regards,
Iliana Nikolova 
Telerik

[Ro]

That's what I did in the first place.

But it didn't work as expected  :(

[Iliana Dyankova]

Hi Ro,

The width: auto should be used alongside the rule suggested by my colleague. I.e.:

.k-popup.k-list-container > div{
  overflow: none!important;
  overflow-y: scroll!important;
}

.k-list-container {
  width: auto !important;
}

taka e a look at the dojo example from my previous post and let me know if I am missing something. 

Regards,
Iliana Nikolova
Telerik