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

DropDownList items width

9 Answers 375 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ro
Top achievements
Rank 1
Ro asked on 17 Nov 2015, 07:12 PM

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


9 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 19 Nov 2015, 08:05 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ro
Top achievements
Rank 1
answered on 19 Nov 2015, 08:34 AM

Hi,

Please look at this example, In Category field:

http://dojo.telerik.com/uPulU

Thanks

 

0
Ivan Zhekov
Telerik team
answered on 20 Nov 2015, 02:43 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ro
Top achievements
Rank 1
answered on 22 Nov 2015, 09:38 AM

I think you're right.

How can I manage the ddl width in that case?

 

0
Ivan Zhekov
Telerik team
answered on 25 Nov 2015, 06:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ro
Top achievements
Rank 1
answered on 26 Nov 2015, 09:08 PM

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!

 

 

 

0
Iliana Nikolova
Telerik team
answered on 01 Dec 2015, 08:20 AM
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
0
Ro
Top achievements
Rank 1
answered on 01 Dec 2015, 01:59 PM

That's what I did in the first place.

But it didn't work as expected  :(

0
Iliana Nikolova
Telerik team
answered on 03 Dec 2015, 11:47 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Ro
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Ro
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or