jQuery UI Widgets › Forums › Lists › DropDownList › jqxDropDownList on jqxWindow issue

Tagged: , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqxDropDownList on jqxWindow issue Posts
  • March 20, 2015 at 4:28 pm jqxDropDownList on jqxWindow issue #68912

    omargarro
    Participant

    DropDownList options on a jqxWindow show behind the window. Kind of zindex problem.

    To verify, I modified just a little your jqxwindow/jquery-window-api.htm example ( http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm?(arctic)#demos/jqxwindow/jquery-window-api.htm )

    adding a jqxDropDownList :

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery Window, Window Widget, Window” />
    <meta name=”description” content=”Show, Hide, Pin, Unpin or Open and Close the jqxWindow through its API functions.” />
    <title id=’Description’>Show, Hide, Pin, Unpin or Open and Close the jqxWindow through its API functions.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript”>
    var customButtonsDemo = (function () {
    var _collapsed = false;

    function _addEventListeners() {
    $(‘#showWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘open’);
    });
    $(‘#hideWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘close’);
    });
    $(‘#pinWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘draggable’, false);
    });
    $(‘#unpinWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘draggable’, true);
    });
    _addCustomButtonsHandlers();
    _addSearchInputEventHandlers();
    };

    function _addCustomButtonsHandlers() {
    $(‘#pinButton’).mousedown(function () {
    if ($(‘#customWindow’).jqxWindow(‘draggable’)) {
    $(‘#customWindow’).jqxWindow(‘draggable’, false);
    } else {
    $(‘#customWindow’).jqxWindow(‘draggable’, true);
    }
    });
    $(‘#collapseWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘collapse’);
    });
    $(‘#expandWindowButton’).mousedown(function () {
    $(‘#customWindow’).jqxWindow(‘expand’);
    });
    };

    function _addSearchInputEventHandlers() {
    $(‘#searchTextInput’).keydown(function () {
    _searchButtonHandle();
    });
    $(‘#searchTextInput’).change(function () {
    _searchButtonHandle();
    });
    $(‘#searchTextInput’).keyup(function () {
    _searchButtonHandle();
    });
    $(document).mousemove(function () {
    _searchButtonHandle();
    });
    };

    function _searchButtonHandle() {
    if ($(‘#searchTextButton’).length > 0) {
    if ($(‘#searchTextInput’).val() !== ”) {
    $(‘#searchTextButton’).jqxButton(‘disabled’, false);
    } else {
    $(‘#searchTextButton’).jqxButton(‘disabled’, true);
    }
    $(‘#cancelButton’).jqxButton(‘disabled’, false);
    }
    };

    function _createElements() {
    var source = [
    “Affogato”,”Americano”,”Bicerin”,”Breve”,”Café Bombón”,”Café au lait”,”Caffé Corretto”,”Café Crema”,
    “Caffé Latte”,”Caffé macchiato”,”Café mélange”,”Coffee milk”,”Cafe mocha”,”Cappuccino”,”Carajillo”,
    “Cortado”,”Cuban espresso”,”Espresso”,”Eiskaffee”,”The Flat White”,”Frappuccino”,”Galao”,”Greek frappé coffee”,
    “Iced Coffee”,”Indian filter coffee”,”Instant coffee”,”Irish coffee”,”Liqueur coffee”
    ];

    $(‘#showWindowButton’).jqxButton({ width: ’80px’});
    $(‘#hideWindowButton’).jqxButton({ width: ’80px’ });
    $(‘#pinWindowButton’).jqxButton({ width: ’80px’ });
    $(‘#unpinWindowButton’).jqxButton({ width: ’80px’ });
    $(‘#collapseWindowButton’).jqxButton({ width: ’80px’ });
    $(‘#expandWindowButton’).jqxButton({ width: ’80px’ });
    $(“#jqxContrato”).jqxDropDownList({
    theme: ‘energyblue’, selectedIndex: 0, source: source, displayMember: “descrip”, valueMember: “idcontrato”, width: 150, height: 25
    });

    $(‘#customWindow’).jqxWindow({ width: 400,
    height: 180, resizable: false,
    cancelButton: $(‘#cancelButton’),
    initContent: function () {
    $(‘#searchTextButton’).jqxButton({ width: ’80px’, disabled: true });
    $(‘#cancelButton’).jqxButton({ width: ’80px’, disabled: false });
    $(‘#matchCaseCheckBox’).jqxCheckBox({ width: ‘150px’ });
    }
    });
    };

    return {
    init: function () {
    _createElements();
    _addEventListeners();
    }
    };
    } ());

    $(document).ready(function () {
    customButtonsDemo.init();
    });
    </script>
    </head>
    <body class=’default’>
    <div style=”width: 100%; height: 650px;” id=”jqxWidget”>
    <input type=”button” value=”Open” id=”showWindowButton” />
    <input type=”button” value=”Close” id=”hideWindowButton” style=”margin-left: 3px” />
    <input type=”button” value=”Pin” id=”pinWindowButton” style=”margin-left: 3px” />
    <input type=”button” value=”Unpin” id=”unpinWindowButton” style=”margin-left: 3px” />
    <input type=”button” value=”Collapse” id=”collapseWindowButton” style=”margin-left: 3px” />
    <input type=”button” value=”Expand” id=”expandWindowButton” style=”margin-left: 3px” />
    <div
    id=”mainDemoContainer”>
    <div id=”customWindow”>
    <div id=”customWindowHeader”>
    <span id=”captureContainer” style=”float: left”>Find </span>
    </div>
    <div id=”customWindowContent” style=”overflow: hidden”>
    <div style=”margin: 10px”>
    Fi<u>n</u>d what:
    <input type=”text” style=”width: 175px; border: 1px solid #aaa” id=”searchTextInput” /><br/><br/>
    <div id=’jqxContrato’ ></div>
    <div style=”float: right”>
    <input type=”button” value=”Find Next” style=”margin-bottom: 5px;” id=”searchTextButton” /><br />
    <input type=”button” value=”Cancel” id=”cancelButton” />
    </div>
    <br />
    <br />
    <div id=”matchCaseCheckBox”>
    Match case</div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    you will see that the options stay behind the window panel

    Help please !

    March 21, 2015 at 8:07 am jqxDropDownList on jqxWindow issue #68933

    Dimitar
    Participant

    Hello omargarro,

    jqxDropDownList has a property popupZIndex. Please set it to an appropriate large number (e.g. 99999) and the issue should be gone.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.