Custom Lightbox Select Box


I am trying to implement a jquery selectbox in scheduler4.2 (in that case a jquery-selectbox called “chosen”, but with all others it’s the same) and the problem is, that opening the select box cannot show the options because the select-box-container is somehow in the background and cannot “overlay” the next section. Can anybody point me in the right direction what perhaps “style” I have to use to show the whole options?


 scheduler.config.lightbox.sections = [
        {name:"description", height:40, map_to:"text", type:"textarea"},
        {name:"time", height:72, type:"calendar_time", map_to:"auto"},
        {name:"details", height:50, map_to:"details", type:"textarea"},
        {name:"welchesstaff", map_to:"welchesstaff", height:100, type:"staff_multi", options:scheduler.serverList("welchesstaff")},
        {name:"welchesprojekt", height:21, map_to:"welchesprojekt", type:"select",
        {name:"welchetaetigkeit", height:21, map_to:"welchetaetigkeit", type:"select",
        {name:"welchesstudio", height:21, map_to:"welchesstudio", type:"select",
            options:scheduler.serverList("welchesstudio"), default_value: "<?php echo $userid; ?>" },
        { name:"completed", map_to:"completed", type:"checkbox",
            checked_value: "1", height:40},
        {name:"details_addon", height:50, map_to:"details_addon", type:"textarea"}



            var html = '<div class="dhx_cal_ltext_staff" style="height:100px;" >';
            html += '<select id="staff_select" style="height:100px;">';
            html += '<option value="1">Option 1</option>';
             html += '<option value="2">Option 2</option>';
             html += '<option value="3">Option 3</option>';
             html += '<option value="999">niemand</option>';
            html += '</select>';
            html += '</div>';
            return html;

            //var multiSelectedVal = $("#staff_select").data("kendoMultiSelect").value();
            //return multiSelectedVal;
            return node.childNodes[0].value;
            //var a=node.childNodes[0];; a.focus();

    scheduler.attachEvent("onLightbox", function(event_id){
            placeholder: "Select report type"


    scheduler.attachEvent("onBeforeLightbox", function(event_id) {
        return true;

By looking at screenshot it seems that custom selectbox was attached to the section html and not to the document.body or some other top container. As result it is limited by size of section, so only part of select is visible.


long time ago I asked for help with this… And the problem has arised again…
Can anybody point me into the right direction how to attach the

<select id="staff_select" style="height:100px;">';

to the document.body or some other top container?

Thank you very much,

Hello, any updates on this ? As i am interested to embed jQuery Chossen in the lightbox too.

if the issue is still actual, can you please prepare a demo that demonstrates it? you can use or our sandbox tool (use Share button to generate a link to the demo)
That way we could check it without spending too much time on googling for required jquery plugins and rebuilding the sample from a screenshot.

Hello and thanks for your support

Here is the link that shows the issue:

i think it can be solved quite easily by setting overflow for a control container, please check this demo