如何使免费的jqgrid字体真棒动作按钮更大

时间:2015-03-10 19:03:57

标签: jquery css jqgrid jqgrid-inlinenav free-jqgrid

使用带有字体真棒图标集的免费jqgrid 4.8。

使用colmodel

定义标准操作按钮
[{"name":"_actions","search":false,"width":(37+15)+45
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"keys":true
,"delbutton":true}]

使用

中的代码添加其他按钮

how add button before action buttons in jqgrid

但即使在此代码中使用了字体真棒类,它们也会显示为jquery ui按钮。

使用JQgrid set row height

中的代码增加jqgrid行高
.ui-jqgrid tr.jqgrow td {
    height: 2.8em !important;
}

但内联格式化程序操作按钮对于平板电脑来说太小了。

使用

增加工具栏按钮的大小
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    font-size: 20px;
}
来自How to make jqgrid top toolbar custom buttons bigger like standard buttons

但这不会影响内联操作按钮。

我尝试使用

.ui-icon {
    zoom: 1.5;
}

但这只会改变jquery ui动作按钮。

如果使用字体真棒,如何增加内联操作按钮的大小? 如何使用自定义jquery ui动作按钮的字体真棒图标按钮?

1 个答案:

答案 0 :(得分:1)

您可以通过多种方式解决问题。例如,您可以添加CSS规则,如下所示

.jqgrow .ui-jqgrid-actions > .ui-pg-div > span { font-size: 24px; }

.jqgrow .ui-pg-div > span.fa { font-size: 24px; }

The demo演示了结果。它还使用另一个width值作为默认值

{ name: "act", template: "actions", width: 72 }