jQWidgets Forums

jQuery UI Widgets Forums General Discussions Dialogs and Notifications Window Issue with jqxInput in a Window

This topic contains 3 replies, has 3 voices, and was last updated by  hf 8 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Issue with jqxInput in a Window #15577

    gjsmith66
    Member

    If I place your demo code :

    var countries = new Array(“Afghanistan”, “Albania”, “Zimbabwe”);
    $(“#input”).jqxInput({ placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1, source: countries,theme:theme });

    onto a Window configured like so :

    $(“#add_transaction”).jqxWindow({
    height: 650,
    width: 650,
    isModal: true,
    autoOpen: false
    });

    The drop-down when you type A in the box will not be displayed. Looking at Firebug, it appears that the Z-Index gets messed up and the drop-down is displayed underneath the window. I do not believe that this is expected behavior.

    Thanks!
    Gary

    Issue with jqxInput in a Window #15603

    Peter Stoev
    Keymaster

    Hi Gary,

    The z-index of the jqxInput’s popup is lower than the jqxWindow’s z-index. We will resolve this in the future by providing a zIndex property for the popups.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Issue with jqxInput in a Window #89282

    hf
    Participant

    Is this problem already solved? This probleem appears within the editDialogCreate as well.

    
                  editDialogCreate: function (dialog, fields, editAppointment) {
                        debugger;
                        // hide repeat option
                        fields.repeatContainer.hide();
                        // hide status option
                        fields.statusContainer.hide();
                        // hide timeZone option
                        fields.timeZoneContainer.hide();
                        // hide color option
                        fields.colorContainer.hide();
                        // hide repeat option
                        fields.repeatContainer.hide();
                        // hide all day option
                        fields.allDayContainer.hide();
    
                        fields.subjectLabel.html("Onderwerp");
                        fields.locationLabel.html("Locatie");
                        fields.fromLabel.html("Start");
                        fields.toLabel.html("Eind");
                        fields.resourceLabel.html("Werknemer");
    
                        // add custom opdrachtbon field
                        var OpdrachtbonField = ''
                        OpdrachtbonField +=
                            '<div>' +
                                '<div class="jqx-scheduler-edit-dialog-label">Opdrachtbon</div>' +
                                '<div class="jqx-scheduler-edit-dialog-field">' +
                                    '<input type="text" id="Opdrachtbon" />' +
                                '</div>' +
                            '</div>';
    
                        var i = 0;
                        $('#dialogSchedulePersons').children('div').each(function () { // loop trough the div's (only first level childs) elements in dialogscheduler
                            i += 1;
                            if (i == 2) { // places the field in the third position.
                                $(this).after(OpdrachtbonField);
                            };
                        });
    
                        $("#Opdrachtbon").jqxInput({
                            theme: theme, placeHolder: "Opdrachtbon", displayMember: "Referentie", valueMember: "Id", width: '98%', height: 24,
                            source: function (query, response) {
                                var Datafields = DatafieldsOpdrachtbonnen();
                                var dataAdapter = new $.jqx.dataAdapter
                                (
                                    {
                                        type: 'GET',
                                        contentType: 'application/json; charset=utf-8',
                                        datatype: "json",
                                        datafields: Datafields,
                                        url: "getData.asmx/GetOpdrachtbonnen",
                                        data:
                                        {
                                            pagenum: "0",
                                            pagesize: "20",
                                            sortdatafield: "Id",
                                            sortorder: "desc",
                                            filterscount: "1",
                                            filtervalue0: query,
                                            filtercondition0: "CONTAINS",
                                            filterdatafield0: "Id",
                                            filteroperator0: ""
                                        }
                                    },
                                    {
                                        autoBind: true,
                                        formatData: function (data) {
                                            data.Id = query;
                                            return data;
                                        },
                                        loadComplete: function (data) {
                                            data = data.d;
                                            if (data.count > 0) {
                                                response($.map(data.data, function (item) {
                                                    return {
                                                        label: item.Id + (item.Referentie ? ", " + item.Referentie : ""),
                                                        value: item.Id
                                                    }
                                                }));
                                            }
                                        }
                                    }
                                )
                            }
                        });
    
    
    Issue with jqxInput in a Window #89383

    hf
    Participant

    Solution:

    
            .jqx-popup {
                position:absolute;
                cursor:default;
                z-index:4000 !important
            }
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.