DropDownList items width

10 posts, 0 answers
  1. Ro
    Ro avatar
    18 posts
    Member since:
    Dec 2014

    Posted 17 Nov 2015 Link to this post

    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


  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 19 Nov 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ro
    Ro avatar
    18 posts
    Member since:
    Dec 2014

    Posted 19 Nov 2015 in reply to Ivan Zhekov Link to this post

    Hi,

    Please look at this example, In Category field:

    http://dojo.telerik.com/uPulU

    Thanks

     

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 20 Nov 2015 Link to this post

    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!
     
  6. Ro
    Ro avatar
    18 posts
    Member since:
    Dec 2014

    Posted 22 Nov 2015 in reply to Ivan Zhekov Link to this post

    I think you're right.

    How can I manage the ddl width in that case?

     

  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 25 Nov 2015 Link to this post

    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!
     
  8. Ro
    Ro avatar
    18 posts
    Member since:
    Dec 2014

    Posted 26 Nov 2015 in reply to Ivan Zhekov Link to this post

    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!

     

     

     

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 01 Dec 2015 Link to this post

    Hi Ro,

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

    Regards,
    Iliana Nikolova 
    Telerik
  10. Ro
    Ro avatar
    18 posts
    Member since:
    Dec 2014

    Posted 01 Dec 2015 in reply to Iliana Nikolova Link to this post

    That's what I did in the first place.

    But it didn't work as expected  :(

  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 03 Dec 2015 Link to this post

    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;
    }
    Please 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!
     
Back to Top
Kendo UI is VS 2017 Ready