jQuery UI Widgets Forums Editors DateTimeInput unable to put datatime widget on window widget correctly

This topic contains 6 replies, has 2 voices, and was last updated by  Peter Stoev 7 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • zqq7231
    Member

    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 Stoev
    Keymaster

    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


    zqq7231
    Member

    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.

    • This reply was modified 7 years, 11 months ago by  zqq7231.

    zqq7231
    Member

    ———— 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

    • This reply was modified 7 years, 11 months ago by  zqq7231.

    Peter Stoev
    Keymaster

    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


    zqq7231
    Member

    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 Stoev
    Keymaster

    Hi qianqian,

    Thanks for the follow up.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.