unable to put datatime widget on window widget correctly

[zqq7231Member]

Hi,

I create a window widget, and put jqxdatetimeinput on it.
The jqxdatetimeinput can show correctly, but when I click the icon, the calendar panel always show under the window widget.
How can I fix it?

Thanks

[Peter StoevKeymaster]

Hi zqq7231,

Could you please send us your page’s html + javascript code, so we can test the specific erroneous scenario? I suppose that there’s something related to the z-indexes, but I wasn’t able to reproduce it locally and that’s why I am asking for your code. In addition, please tell us the jQWidgets version that you use and also the browser’s name and version.

Looking forward to your reply.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[zqq7231Member]

Hi Peter,

Thanks for your reply.
I use IE8 to test this case. And the jQWidgets version is 1.7 which I downloaded yesterday.
BTW, I also tested it on Firefox4.0 which works well.
The code is just based on the sample of the demo.

————————————— code below —————————————–

You can use the jqxWindow to direct a user’s attention to a particular activity in your application, such as entering data or viewing information. Consider using a jqxWindow when you want greater customization, you want to block the user interface outside the window, or when you want to retrieve a DialogResult and other data from the popup window. jqxWindow can be displayed as a modal dialog window that blocks user interaction with the underlying user interface or as a standard window without blocking the web page’s user interface.

var basicDemo = (function () {
//Adding event listeners

//Creating all page elements which are jqxWidgets
function _createElements() {
$(‘#tab’).jqxTabs({ height: 258, theme: basicDemo.config.theme });
$(‘#date’).jqxDateTimeInput({ width: ‘250px’, height: ’25px’, theme: basicDemo.config.theme });
};

//Creating the demo window
function _createWindow() {
$(‘#window’).jqxWindow({ maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500, theme: basicDemo.config.theme });
};

return {
config: {
dragArea: null,
theme: null
},
init: function () {
//Creating all jqxWindgets except the window
_createElements();
//Adding jqxWindow
_createWindow();
}
};
} ());

$(document).ready(function () {
var theme = $.data(document.body, ‘theme’, theme);
if (theme == undefined) theme = ”;

//Setting demo’s theme
basicDemo.config.theme = theme;
//Initializing the demo
basicDemo.init();

});

Movies

Avatar

Avatar is a 2009 American[6][7] epic science fiction film written and directed by
James Cameron, and starring Sam Worthington, Zoe Saldana, Stephen Lang, Michelle
Rodriguez, Joel David Moore, Giovanni Ribisi and Sigourney Weaver. The film is set
in the mid-22nd century, when humans are mining a precious mineral called unobtanium
on Pandora , a lush habitable moon of a gas giant in the Alpha Centauri star system.
The expansion of the mining colony threatens the continued existence of a local
tribe of Na’vi—a humanoid species indigenous to Pandora. The film’s title refers
to the genetically engineered Na’vi-human hybrid bodies used by a team of researchers
to interact with the natives of Pandora.

[zqq7231Member]

———— why it can’t display code itself? ——————–
————————————————————————-

Test datetime on window

$(document).ready(function () {
$(‘#tab’).jqxTabs({ height: 258});
$(‘#date’).jqxDateTimeInput({ width: ‘250px’, height: ’25px’});
$(‘#window’).jqxWindow({ maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500});
});

Movies

Avatar

Text text text text

[Peter StoevKeymaster]

Hi zqq7231,

1. I was able to reproduce the issue with IE7, but not with IE8 or IE9. We will continue to test and debug the issue related to IE7.

As a workaround you can use the code below:

     var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});

Call the above code after initializing all UI widgets.

2. To display code in your blog posts, you the “Format HTMLCode” button(situated next to the color button) in the forum editor’s toolbar.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[zqq7231Member]

Hi Peter,

Yes, thanks.
It works well with IE8. I used another browser which is based on IE, so it may based on IE7.

Best Regards,
qianqian

[Peter StoevKeymaster]

Hi qianqian,

Thanks for the follow up.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts