Search code examples
jquery-uijquery-chosenjquery-jtable

Chosen result overlap in popup window


Can anyone help to avoid this issue using css, I tried but without solution until now. seems like it is related to container's height because the content cut in parallel with popup height!

 //Initialize validation logic when a form is created
        formCreated: function (event, data) {
            selectedToTac = $('#Edit-ToTacticID').val();
            selectedFromTac = $('#Edit-FromTacticID').val();
            $('#Edit-ToTacticID, #Edit-FromTacticID').empty();
            data.form.css('width', '450px');
            data.form.css('height', '120px');
            data.form.css('overflow-x', 'hidden');
            data.form.css('overflow-y', 'hidden');
            data.form.find('select[name=FromTacticID]').css('width', '430px');
            data.form.find('select[name=ToTacticID]').css('width', '430px');
            $.ajax({
                url: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/default.aspx/GetGroupTacticOptions',
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    CreateSelectOpt(data);
                    $("#Edit-FromTacticID").trigger("chosen:updated");
                    $("#Edit-ToTacticID").trigger("chosen:updated");
                },
                error: function (msg) {
                    //error
                }
            });
            $("#Edit-FromTacticID").chosen({
                placeholder_text_single: 'Select a stage',
                overflow_container: $(".scrolling-div")
            });
            $("#Edit-ToTacticID").chosen({
                placeholder_text_single: 'Select a stage',
                overflow_container: $(".scrolling-div")
            });
            data.form.validationEngine();
        },
        //Validate form when it is being submitted

enter image description here


Solution

  • I found a solution for my thread to popup the dropdown outside the dialog box by using the following old version for chosen jquery plugin.