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

问题描述

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

标准操作按钮使用colmodel定义

  [{name：_ actions，search：false，width:( 37 + 15）+45 
，sortable：false， ：actions，viewable：false，formatoptions：{editbutton：true，keys：true 
，delbutton：true}] 
  
 
 
 
  
 
 
 
但是它们显示为jquery ui按钮，即使在此代码中使用了字体真棒类。
 
 
 
 jqgrid行高增加使用 
  .ui-jqgrid tr.jqgrow td {
 height：2.8em！important; 
} 
  
但是内置格式化操作按钮对于平板电脑来说太小。
 
 
 
工具栏按钮大小使用
增加。
 
 
  .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div> span {
 font-size：20px; 
} 
  
从演示结果。它另外使用另一个 width 值作为默认值
  {name：act，template：actions，width：72} 
  
 
Free jqgrid 4.8 with font awesome icon set is used.
Standard action buttons are defined using colmodel
[{"name":"_actions","search":false,"width":(37+15)+45
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"keys":true
,"delbutton":true}]
additional buttons are added using code from
how add button before action buttons in jqgrid
but they appear as jquery ui buttons even if font awesome classes are used in this code.
jqgrid row height is increased using code from JQgrid set row height
.ui-jqgrid tr.jqgrow td {
    height: 2.8em !important;
}
but inline formatter action buttons are too small for tablets.
Toolbar button sizes are increased using
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    font-size: 20px;
}
from How to make jqgrid top toolbar custom buttons bigger like standard buttonsbut this does not affect to inline action buttons.
I tried to use 
.ui-icon {
    zoom: 1.5;
}
but this changes only jquery ui action buttons.
How to increase sizes of inline action buttons if font awesome is used ?How to use font awesome icons buttons for custom jquery ui action buttons ?
 解决方案 
You can solve the problem in many ways. For example you can add CSS rule like the following
.jqgrow .ui-jqgrid-actions > .ui-pg-div > span { font-size: 24px; }
or 
.jqgrow .ui-pg-div > span.fa { font-size: 24px; }
The demo demonstrates the results. It used additionally another width value as default
{ name: "act", template: "actions", width: 72 }
                        
这篇关于如何使免费jqrid字体真棒动作按钮更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！