Remove dancing effect in Chrome from free jqgrid t

2019-08-12 12:07发布

站内问答 / HTML/CSS
954 1 4

I tried demo

http://www.ok-soft-gmbh.com/jqGrid/FortAwesome/FontAwesome2.htm

from answer

How to make jqgrid top toolbar custom buttons bigger like standard buttons

in Chrome in less than 100% browser zoom level.

Hovering mouse over toolbar buttons cause toolbar to vibrate ugly.

It 100% zoon it does not occur but it occurs in every zoom level less than 100% It does not occur in zoom level >=100% and it does not occu in Intrnet Explorer

It occurs in both top and bottom toolbars.

How to fix this ?

In my application text is below buttons and font size is 16. I tried to replace

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

with 

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 1px 4px;
    font-size: 16px;
}

In this case dancing is a bit smaller but still occurs. How to fix this ?

If jquery ui icons are used problem doent occur. How to fix this so that FontAwesome icons can also normally used ?

Update

I added styles in answer (from http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4Large-borderlessOnHover3.htm ) to last demo from answer how to place pager to end of top of toolbar in free jqgrid but dancing still occurs for pager buttons and for pressed toggle button.

Also pressing disabled buttons draws border over them. How to fix this ?

Testcase:

<!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>
        html, body { font-size: 75%; }
        .ui-datepicker select.ui-datepicker-year,
        .ui-datepicker select.ui-datepicker-month {
            color: black
        }
        .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; }






.ui-jqgrid > .ui-jqgrid-pager .navtable,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
    font-size: 16px;
}

.ui-jqgrid .ui-pg-table {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .ui-pg-table .ui-pg-button:hover, .ui-jqgrid .ui-pg-table.navtable .ui-pg-button.ui-state-active {
        font-weight: normal;
        border: 0 none;
        background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
    }

.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}

.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}




    </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" }
            ],
            $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: 10,
            autoResizing: { compact: true },
            rowList: [5, 10, 20, "10000:All"],
            //pagerpos: "right",
            //viewrecords: true,
            //pgbuttons: false,
            //pginput: false,
            //width: 390,
            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");
            }
        });
        $("#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>

1条回答
霸刀☆藐视天下
2楼-- · 2019-08-12 12:46

The reason of "dancing" of hovered buttons is the scaling of 1px border displayed on hovering. See the lines of jQuery UI CSS. The scaling are implemented in very difficult way in different web browsers. So 1px of the border will be scaled not in the same way like 1px in margin or in pagging. So the lines used in ui.jqgrid.css eliminates the "dancing" of hovered buttons only in case of zoom 100%, 200% and so on.

The only safe solution of the problem which I can suggest you is removing of the border of hovered buttons. The demo uses the CSS

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

and the hovered buttons will be displayed like on the picture below

enter image description here

You can change additionally the background color used on hovered buttons to display hover effect more clear. For example the next demo uses 

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

The results are shown on the next picture

enter image description here

UPDATED: To remove "dancing" in pager buttons and in the buttons of the formatter: "actions" one can use the following CSS for example:

.ui-pg-table .ui-pg-button:hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .jqgrow  .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}

see the demo.

UPDATED 2: The demo shows how to remove "dancing" of the pager buttons which are moved in the navigation bar. It shows additionally how to remove "dancing" of tree-state buttons. It uses CSS rule

.ui-pg-table .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active {
    border: 0 none;
}
.ui-pg-table .ui-pg-button:hover * {
    background-color: #b6dbf7
}
.ui-pg-table .ui-pg-table.navtable .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button span.fa {
    margin-top: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
}
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.fa,
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.ui-icon {
    background-color: #b6dbf7;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)