如何使免费jqrid字体真棒动作按钮更大 [英] How to make free jqrid font awesome action buttons bigger

问题描述

使用带有字体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}] 
  
 
 
 
  stackoverflow.com/questions/10160660/how-add-button-before-action-buttons-in-jqgrid\">在jqgrid中的操作按钮之前添加按钮 
 
 
 
但是它们显示为jquery ui按钮，即使在此代码中使用了字体真棒类。
 
 
 
 jqgrid行高增加使用JQgrid设置行高 
  .ui-jqgrid tr.jqgrow td {
 height：2.8em！important; 
} 
  
但是内置格式化操作按钮对于平板电脑来说太小。
 
 
 
工具栏按钮大小使用
增加。
 
 
  .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div> span {
 font-size：20px; 
} 
  
从 
但这是做的
  
 .ui-icon {
 zoom：1.5; 
} 
  
但这只会更改jquery ui操作按钮。
 
 
 
如果使用字体真棒，如何增加内联操作按钮的大小？ 
如何使用自定义jquery ui操作按钮的字体真棒图标按钮？
解决方案
方法。例如，您可以添加如下的CSS规则
  .jqgrow .ui-jqgrid-actions> ; .ui-pg-div> span {font-size：24px; } 
  
或
  .jqgrow .ui-pg-div> span.fa {font-size：24px; } 
  
 演示演示结果。它另外使用另一个 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 buttons
but 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字体真棒动作按钮更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！