Comment supprimer jqgrid libre propre barre de défilement horizontale si autowidth: true est utilisé

La largeur jqgrid libre est définie pour occuper au moins toute la largeur de la fenêtre à l’aide des parameters de jqGrid et de l’option autowidth. Comment ça marche? réponse

autowidth: true, shrinkToFit: false,

Les icons de la barre d’outils de niveau supérieur sont agrandies à l’aide du style ci-dessous des réponses.

Si jqgrid contient plusieurs lignes et que la barre de défilement verticale apparaît, ces parameters font en sorte que la barre de défilement horizontale apparaisse dans Chrome, même si toutes les colonnes de la grid sont adaptées à l’écran. Comment faire pour supprimer cette barre de défilement horizontale unnessecary? Il ne doit apparaître que si la sum des largeurs de colonne est supérieure à la largeur de la fenêtre.

Pour reproduire, ouvrez la page ci-dessous en chrome afin que les barres de défilement vertical apparaissent

La barre de défilement horizontale apparaît alors également dans la page mais elle ne devrait pas apparaître. ne peut pas être utilisé, car il désactive également la barre de défilement si nécessaire.

       https://stackoverflow.com/q/27617764/315935        .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; } div > span.ui-pg-button-icon-over-text.fa { font-size: 32px; } .ui-jqgrid > .ui-jqgrid-pager .navtable, .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable { font-size: 13px; } .ui-pg-button-text { margin: 4px !important; } .ui-jqgrid .ui-jqgrid-htable th { font-size: 1.2em; } .jqgrow .ui-jqgrid-actions > .ui-pg-div > span { font-size: 22px; } .ui-jqgrid td input[type=date], input[type=time], input[type=datetime-local], input[type=month] { line-height: normal; }      $.jgrid = $.jgrid || {}; $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true;  <!---->    //<![CDATA[ /*global $ */ /*jslint browser: true */ $(function () { "use strict"; var mydata = [ { id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" }, { id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "90", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" }, { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" }, { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "110", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" }, { id: "120", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "130", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "140", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "150", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "160", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "170", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "180", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "190", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" }, { id: "1100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" }, { id: "1110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "1120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "210", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" }, { id: "220", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "230", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "240", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "250", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "260", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, { id: "270", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, { id: "280", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, { id: "290", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" }, { id: "2100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" }, { id: "2110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, { id: "2120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" } ], $grid = $("#grid"), initDateEdit = function (elem) { $(elem).datepicker({ dateFormat: "dd-M-yy", autoSize: true, changeYear: true, changeMonth: true, showButtonPanel: true, showWeek: true }); }, initDateSearch = function (elem) { setTimeout(function () { initDateEdit(elem); }, 100); }; $grid.jqGrid({ data: mydata, colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"], colModel: [ { name: "act", template: "actions" }, { name: "name", align: "center", width: 92, editrules: {required: true} }, { name: "invdate", width: 72, align: "center", sorttype: "date", frozen: true, formatter: "date", formatoptions: { newformat: "dMY", reformatAfterEdit: true }, datefmt: "dMY", editoptions: { dataInit: initDateEdit }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } }, { name: "amount", width: 56, template: "number", hidden: true }, { name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true }, { name: "total", width: 43, template: "number", hidden: true }, { name: "closed", width: 49, template: "booleanCheckboxFa" }, { name: "ship_via", width: 76, align: "center", formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" }, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } }, { name: "note", width: 43, edittype: "textarea", sortable: false } ], cmTemplate: { editable: true, autoResizable: true }, iconSet: "fontAwesome", rowNum: 100, autowidth: true, shrinkToFit: false, rowList: [5, 10, 20, "10000:All"], toppager: true, rownumbers: true, sortname: "invdate", sortorder: "desc", navOptions: { position: "center", addtext: "Add", edittext: "Edit", deltext: "Delete", searchtext: "Search", refreshtext: "Reload", viewtext: "View", savetext: "Save", canceltext: "Cancel", iconsOverText: true }, caption: "Demonstration how to make full width navigator bar" }).jqGrid("navGrid", {view: true}) .jqGrid("inlineNav") //.jqGrid("filterToolbar") .jqGrid("gridResize"); var autoedit = true; $grid.jqGrid("navButtonAdd", "#grid_toppager", { buttonicon: "fa-star", caption: "Toggle", id: "AutoEdit", title: "Toggle autoedit", onClickButton: function (options, e) { var $me = $(e.currentTarget); $me.toggleClass("ui-state-active"); autoedit = $me.hasClass("ui-state-active"); $me.attr("aria-pressed", autoedit ? "true" : "false"); } }); var i; for (i=0; i.navtable").append( $("#grid_toppager_center").find(">table.ui-pg-table") ); $("#grid_toppager_center").find(">.navtable").children().each(function() { $(this).css("float", "left"); }); $grid.bind("jqGridAfterGridComplete", function () { var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager); $toppager.find(".navtable").css("width", ""); }); }); //]]>

Je conviens que le calcul de la largeur de la grid n’est pas parfait en cas d’utilisation d’ autowidth: true . Néanmoins, le problème que vous décrivez n’est pas un problème de jqGrid. C’est bien que vous ayez inclus la division externe sur la grid dans la démo que vous avez publiée. Cela montre la complexité du problème.

Tout d’abord, aucune barre de défilement horizontale ne sera affichée dans IE10 / IE11 dans la démo que vous avez publiée. La raison en est que IE affiche par défaut la barre de défilement verticale semi-transparente. Donc, il ne crée pas de barre de défilement horizontale supplémentaire dans le cas que vous avez décrit.

Vous pouvez résoudre le problème en ajoutant les lignes suivantes à la fin de votre démo:

 if (window.innerWidth > document.documentElement.clientWidth) { $grid.jqGrid("setGridWidth", $grid.jqGrid("getGridParam", "width") - (window.innerWidth - document.documentElement.clientWidth)); }

Voir les résultats ici .

De l’autre côté, la démo a une margin:5px externe sur la grid avec une margin:5px . Si je change la margin:5px en margin:200px la même démo ressemblera à ceci . On peut augmenter la largeur de la grid à près de 200 pixels supplémentaires (le maximum exact est 200 – 4, ce que je ne peux pas expliquer maintenant, mais la valeur peut être modifiée après une amélioration du code de setGridWidth ). Voir la prochaine démo . La raison: les divisions externes ont à la fois une margin-left et une margin-right définies à 200 pixels, mais la barre de défilement de la page n’existera pas si nous ne tenons pas compte de la margin-right . C’est seulement la marge et il n’y a pas d’éléments réels sur la page dans l’espace. Ainsi, les navigateurs Web ne créent pas de barres de défilement horizontales dans le cas.