jQuery UI Widgets › Forums › General Discussions › grid aside menu in firefox
Tagged: JavaScript Menu, jQuery Menu, jqwidgets menu, Menu
This topic contains 2 replies, has 2 voices, and was last updated by madamipraim 6 years, 10 months ago.
-
Author
-
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>
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=menuBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThanks 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.
-
AuthorPosts
You must be logged in to reply to this topic.