Как удалить бесплатную собственную горизонтальную полосу прокрутки jqgrid, если используется autowidth: true

Свободная ширина jqgrid настроена так, чтобы занимать как минимум всю ширину окна с использованием настроек из jqGrid и параметр автоматической ширины. Как это работает? ответ

    autowidth: true,
    shrinkToFit: false,

Значки панели инструментов верхнего уровня увеличены с использованием стиля, приведенного ниже из ответов.

Если в jqgrid много строк, поэтому появляется вертикальная полоса прокрутки, эти настройки вызывают появление горизонтальной полосы прокрутки в Chrome, даже если все столбцы сетки умещаются на экране. Как убрать эту ненужную горизонтальную полосу прокрутки? Он должен появиться только в том случае, если сумма ширины столбцов больше ширины окна.

Для воспроизведения откройте страницу ниже в хроме, чтобы появилась вертикальная полоса прокрутки.

Горизонтальная полоса прокрутки появляется также на странице, но не должна появляться. <body style="overflow-x:hidden"> нельзя использовать, так как он отключает полосу прокрутки, даже если это необходимо.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>https://stackoverflow.com/q/27617764/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
    <style>

        .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;
}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
    <script>
    //<![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: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
                    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<30; i++) {
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-star",
            caption: "Toggle"+i,
            id: "AutoEdit2"+i,
            title: "Toggle autoedit"
        });
}



        $("#grid_toppager")
            .find(".ui-pg-button")
            .each(function (i) {
                $(this).attr({
                    tabindex: String(i),
                    role: "button"
                });
            });
        //$("#AutoEdit").attr("role", "button");
        if (autoedit) {
            $("#AutoEdit").click();
        }
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-table",
            caption: "Columns",
            title: "Choose columns",
            onClickButton: function (options, e) {
                $(this).jqGrid("columnChooser");
            }
        });
        $("#grid_toppager_left").hide();
        $("#grid_toppager_right").hide();
        $("#grid_toppager_center").attr("colspan", "2");
        $("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
        $("#grid_toppager_center").find(">.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", "");
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="outerDiv" style="margin:5px;">
        <table id="grid"></table>
    </div>
</body>
</html>

12.05.2015

Вы имеете в виду, вероятно, горизонтальную полосу прокрутки вместо горизонтальной панели инструментов? 13.05.2015
Спасибо. Я заменил панель инструментов полосой прокрутки в заголовке и содержании вопроса. 13.05.2015

Ответы:

Я согласен с тем, что расчет ширины сетки не идеален при использовании autowidth: true. Тем не менее проблема, которую вы описываете, не является проблемой jqGrid. Хорошо, что вы включили внешний div поверх сетки в опубликованную вами демонстрацию. Это показывает сложность проблемы.

Во-первых, в опубликованной вами демонстрации в IE10 / IE11 не будет отображаться горизонтальная полоса прокрутки. Причина в том, что IE по умолчанию отображает полупрозрачную вертикальную полосу прокрутки. Таким образом, он не создает дополнительную горизонтальную полосу прокрутки в случае, который вы описали.

Вы можете решить проблему, добавив следующие строки в конце демонстрации:

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

См. Результаты здесь.

С другой стороны, в демонстрации есть внешний div над сеткой с margin:5px. Если я изменю margin:5px на margin:200px, то та же демонстрация будет выглядеть как следующее < / а>. Можно увеличить ширину сетки почти до 200 дополнительных пикселей (точный максимум составляет 200-4, что я не могу сейчас объяснить, но значение можно изменить после того, как я улучшу код setGridWidth). См. следующую демонстрацию. Причина: для внешнего div для margin-left и margin-right установлено значение 200 пикселей, но полоса прокрутки на странице не будет существовать, если мы проигнорируем margin-right. Это только поле, а на странице нет реальных элементов в пространстве. Таким образом, веб-браузеры не создают горизонтальных полос прокрутки в корпусе.

13.05.2015

Я пробовал это в приложении, где jqgrid находится внутри панели начальной загрузки. Проблема не устранена. если условие, если не выполняется, и, следовательно, ширина не уменьшается. 13.05.2015

Кроме того, если сетка шире экрана, горизонтальная панель инструментов больше не отображается. Я разместил это в stackoverflow.com/questions/30217324/ 13.05.2015

Последняя демонстрация включает jqgrid два раза:

<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>     <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

13.05.2015

Добавьте этот стиль в свой код

<style type="text/css">
   .ui-jqgrid-bdiv {
       overflow-x: hidden !important;
   }
</style>

09.10.2019

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP