jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Dialogs and Notifications › Window › Issue with jqxInput in a Window
Tagged: editDialogCreate, jqxinput, jqxScheduler, jqxwindow
This topic contains 3 replies, has 3 voices, and was last updated by hf 8 years, 8 months ago.
-
Author
-
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!
GaryHi 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 StoevjQWidgets Team
http://www.jqwidgets.comIs 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 } })); } } } ) } });
Solution:
.jqx-popup { position:absolute; cursor:default; z-index:4000 !important }
-
AuthorPosts
You must be logged in to reply to this topic.