change css of Multiselect dropdown list div

2 posts, 0 answers
  1. Shakil
    Shakil avatar
    7 posts
    Member since:
    May 2014

    Posted 27 Dec 2014 Link to this post

    how can i change the div property of multiselect dropdown from absolute to relative  and
    i want to apply change on particular page multiselect dropdown not on all the pages in application please guide me.
    These are my firebug code
    <div id="select-list" class="k-list-container k-popup k-group k-reset" data-role="popup" style="height:auto; display: none; font-size: 13.6px; font-family: "Segoe
    UI",Verdana,Helvetica,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 19px; width: 492px; transform: translateY(-191px);position: absolute;">
    <ul id="select_listbox" class="k-list k-reset" unselectable="on" style="overflow: auto; height:auto;" tabindex="-1" role="listbox" aria-hidden="true" aria-live="polite">
    <li class="k-item" unselectable="on" data-idx="0" role="option" tabindex="-1" style="display:listitem;">Africa</li>
    <li class="k-item" unselectable="on" data-idx="1" role="option" tabindex="-1" style="display:listitem;">Europe</li>
    <li class="k-item" unselectable="on" data-idx="2" role="option" tabindex="-1" style="display:listitem;">Asia</li>
    <li class="k-item" unselectable="on" data-idx="3" role="option" tabindex="-1" style="display:listitem;">NorthAmerica</li>
    <li class="k-item" unselectable="on" data-idx="4" role="option" tabindex="-1" style="display: list-item;">SouthAmerica</li>
    <li class="k-item" unselectable="on" data-idx="5" role="option" tabindex="-1" style="display:list-item;">Antarctica</li>
    <li class="k-item" unselectable="on" data-idx="6" role="option" tabindex="-1" style="display: list-item;">Australia</li>
    </ul>
    </div>

    i also attach the image of my control


  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 Dec 2014 Link to this post

    Hello Shakil,

    Attach a one-time handler for the open event and apply a custom CSS class to the dropdown container:

    http://docs.telerik.com/kendo-ui/basics/events-and-methods#bind-to-events-after-widget-initialization

    http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#events-open

    http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#fields-list 

    Since the positioned container does not exist at the time the first open event is fired, you will need setTimeout.

    Keep in mind that by changing the dropdown position styles, you will break the built-in dropdown positioning behavior and will have to take care of this functionality yourself.

    Here is a simple example:

    http://dojo.telerik.com/ECogA

    Regards,
    Dimo
    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
Back to Top