jQuery UI Widgets Forums General Discussions grid aside menu in firefox

This topic contains 2 replies, has 2 voices, and was last updated by  madamipraim 4 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • grid aside menu in firefox #97936

    madamipraim
    Participant

    Hello,
    I have a problem with a grid aside a menu in firefox. Popup-menu will not display completely because they are partially hided by the grid. Problem is hard to reproduce because there are a lot of conditions that make the problem happen. The problem appears only in Firefox.
    So I have two question. Is it possible to increase z-index of pop-up menu? This seems to solve the problem. As we don’t have source codes how can I fix the problem?

    The following code will reproduce the problem.
    Thanks in advance.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script src="/lib/jquery/jquery-3.2.1.min.js"></script>
        <script src="/lib/jqwidgets/jqx-all.js"></script>
        <link href="/lib/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
        <link href="/css/site.css" rel="stylesheet" />
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [
                    { "id": 64920, "serialNumber": "100001", "status": 1, "salesmanName": "Roberto", "licenceTypeName": "AAAA", "softwareAssuranceExpirationDate": "2011-11-30T00:00:00", "endUserId": 1059, "dealerId": 1059, "wholesalerId": 43, "endUserCode": 21001315, "endUserName": "FADFA SRL", "dealerCode": 21001315, "dealerName": "EWRFEWFE SRL", "wholesalerCode": 21000056, "wholesalerName": "FWEFWE SRL", "numberOfDevices": 5, "numberOfRegisteredDevices": 0, "numberOfEnabledRegisteredDevices": 13, "numberOfInstances": 0, "numberOfThinox4Pc": 0, "numberOfThinox4PcEvaluation": 0, "thinox4PcEvaluationExpirationDate": null, "agileStatus": 0, "note": null },
                    { "id": 64921, "serialNumber": "100002", "status": 1, "salesmanName": "Roberto", "licenceTypeName": "FSDFS NFR", "softwareAssuranceExpirationDate": "2011-11-30T00:00:00", "endUserId": 1173, "dealerId": 1173, "wholesalerId": 43, "endUserCode": 21001430, "endUserName": "RWERWEFW SRL", "dealerCode": 21001430, "dealerName": "KPWEK SRL", "wholesalerCode": 21000056, "wholesalerName": "FWEFWE SRL", "numberOfDevices": 5, "numberOfRegisteredDevices": 0, "numberOfEnabledRegisteredDevices": 0, "numberOfInstances": 0, "numberOfThinox4Pc": 0, "numberOfThinox4PcEvaluation": 0, "thinox4PcEvaluationExpirationDate": null, "agileStatus": 0, "note": null },
                ];
                var source =
                    {
                        localdata: data,
                        datatype: "array",
                        datafields: [
                            { name: 'id', type: 'number' },
                            { name: 'serialNumber', type: 'string' },
                            { name: 'softwareAssuranceExpirationDate', type: 'date' },
                            { name: 'dealerCode', type: 'string' },
                            { name: 'dealerName', type: 'string' },
                            { name: 'endUserCode', type: 'string' },
                            { name: 'endUserName', type: 'string' },
                            { name: 'wholesalerCode', type: 'string' },
                            { name: 'wholesalerName', type: 'string' },
                            { name: 'salesmanName', type: 'string' },
                            { name: 'numberOfDevices', type: 'number' },
                            { name: 'numberOfRegisteredDevices', type: 'number' },
                            { name: 'numberOfEnabledRegisteredDevices', type: 'number' },
                            { name: 'numberOfInstances', type: 'number' },
                            { name: 'numberOfThinox4Pc', type: 'number' },
                            { name: 'numberOfThinox4PcEvaluation', type: 'number' },
                            { name: 'thinox4PcEvaluationExpirationDate', type: 'date' },
                            { name: 'agileStatus', type: 'number' },
                            { name: 'status', type: 'number' },
                            { name: 'licenceTypeName', type: 'string' },
                            { name: 'endUserId', type: 'number' },
                            { name: 'dealerId', type: 'number' },
                            { name: 'wholesalerId', type: 'number' },
                        ],
                    };
                var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                    var parent = $(parentElement).children()[0];
                    var details = $(parent);
                    var html = 'Details should go here';
                    details.html(html);
                }
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#grid").jqxGrid(
                    {
                        width: "100%",
                        source: dataAdapter,
                        enablebrowserselection: true,
                        columnsresize: true,
                        sortable: true,
                        filterable: true,
                        showfilterrow: true,
                        pageable: true,
                        columnsreorder: true,
                        autosavestate: true,
                        autoloadstate: true,
                        pagesizeoptions: ['25', '100', '1000'],
                        pagesize: 25,
                        rowdetails: true,
                        rowdetailstemplate: { rowdetails: "<div style='margin: 1em; margin-top: 0.5em; '></div>", rowdetailsheight: 200 },
                        initrowdetails: initrowdetails,
                        columns: [
                            { text: 'Serial Number', datafield: 'serialNumber', width: 200, pinned: true },
                            { text: 'Status', datafield: 'status', pinned: true, width: 50 },
                            { text: 'S.A. Expires', datafield: 'softwareAssuranceExpirationDate', filtertype: 'range', cellsformat: 'dd.MM.yyyy', width: 85 },
                            { text: 'End User Code', datafield: 'endUserCode', width: 110, },
                            { text: 'End User', datafield: 'endUserName', width: 170 },
                            { text: 'Dealer Code', datafield: 'dealerCode', width: 110,  },
                            { text: 'Dealer', datafield: 'dealerName', width: 170 },
                            { text: 'Sold to Code', datafield: 'wholesalerCode', width: 110, },
                            { text: 'Sold to', datafield: 'wholesalerName', width: 170 },
                            { text: 'Salesman', datafield: 'salesmanName', width: 170 },
                            { text: 'Licence type', datafield: 'licenceTypeName', width: 170 },
                            { text: '# Licences', datafield: 'numberOfDevices', width: 170 },
                            { text: '# Registered in Thinman', datafield: 'numberOfRegisteredDevices', width: 170 },
                            { text: '# Enabled in SERP', datafield: 'numberOfEnabledRegisteredDevices', width: 170 },
                            { text: '# Instances', datafield: 'numberOfInstances', width: 170,  },
                            { text: '# Thinox4PC', datafield: 'numberOfThinox4Pc', width: 170 },
                            { text: '# Thinox4PC Evaluation', datafield: 'numberOfThinox4PcEvaluation', width: 170 },
                            { text: 'Evaluation expires', datafield: 'thinox4PcEvaluationExpirationDate', width: 170, cellsformat: 'dd.MM.yyyy', width: 85 },
                            { text: 'Agile', datafield: 'agileStatus', width: 170, },
                        ],
                        ready: function () {
                            $('#grid').jqxGrid('loadstate');
                            $('#grid').jqxGrid({ height: 800 });
                        },
                    });
    
                $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical', theme: "bootstrap" });
            });
        </script>
    </head>
    <body class='default'>
        <div class="bodyPanel" style="display: flex;">
            <div class="menuPanel">
                <div id='jqxMenu'>
                    <ul>
                        <li>
                            Devices
                            <ul>
                                <li><a href='#'>List</a></li>
                                <li><a href='#'>Create</a></li>
                                <li>
                                    Sellout
                                    <ul>
                                        <li><a href='#'>New</a></li>
                                        <li><a href='#'>Discarded</a></li>
                                    </ul>
                                </li>
                                <li>
                                    Licences
                                    <ul>
                                        <li><a href='#'>Generate</a></li>
                                        <li><a href='#'>Decoder</a></li>
                                        <li><a href='#'>Bulk insert</a></li>
                                    </ul>
    
                                <li><a href='#'>Product models</a></li>
                                <li><a href='#'>Product codes</a></li>
                                <li>
                                    Producer
                                    <ul>
                                        <li><a href='#'>List of thinclients</a></li>
                                        <li><a href='#'>Bulk insert</a></li>
                                        <li><a href='#'>Create device</a></li>
                                    </ul>
                                </li>
                                <li><a href='#'>Sync navision</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href='#'>Thinman</a>
                        </li>
                        <li>
                            <a href='#'>Print 2000</a>
                        </li>
                        <li>
                            <a href='#'>Customers</a>
                        </li>
                        <li>
                            Packages
                            <ul>
                                <li><a href='#'>List</a></li>
                                <li><a href='#'>Create</a></li>
                            </ul>
                        </li>
                        <li>
                            RMA
                            <ul>
                                <li>
                                    RMA Request
                                    <ul>
                                        <li><a href='#'>List</a></li>
                                        <li><a href='#'>Create</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href='#'>RMA</a>
                                </li>
                                <li>
                                    Tables
                                    <ul>
                                        <li><a href='#'>Defects</a></li>
                                        <li><a href='#'>Reject reasons</a></li>
                                        <li><a href='#'>Cities</a></li>
                                        <li><a href='#'>Provinces</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href='#'>Log out</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="contentPanel" style="flex: 1; margin-left: 2em;">
                <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
                    <div id="grid"></div>
                </div>
            </div>
        </div>
    </body>
    </html>
    grid aside menu in firefox #97961

    Hristo
    Participant

    Hello madamipraim,

    I tested your example in FireFox and it seems to work fine.
    You do not need to worry if you change the z-index if this is suitable for your case.
    There is “popupZIndex” property of the jqxMenu you could try with this before all.
    I would like to suggest you try to use the some of the suggested classes for stylizing:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-styling-and-appearance.htm?search=menu

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    grid aside menu in firefox #97982

    madamipraim
    Participant

    Thanks Hristo. I’m a little confused, I can’t understand why you can’t reproduce the problem. Anyway popupZIndex is what I need to solve it. Thanks a lot.

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

You must be logged in to reply to this topic.