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

change css of Multiselect dropdown list div

1 Answer 1426 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Shakil
Top achievements
Rank 1
Shakil asked on 27 Dec 2014, 06:29 AM
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


1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Dec 2014, 11:00 AM
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!
Tags
MultiSelect
Asked by
Shakil
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or