如何使元素大小填充单元格大小并增加免费jqgrid内联和表单编辑中的字体 [英] How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

问题描述

jqgrid字体大小根据如何更改jqGrid中的字体大小？

使用

 。 ui-jqgrid tr.jqgrow td {
 font-size：1.2em; 
} 
  

不幸的是，这不会改变内联和表单编辑元素的字体大小。

我正在寻找一种在免费的jqgrid内联编辑中占据整个单元格内容的方式，并且在表单和内联编辑中增加字体大小。

根据 https://github.com/free-jqgrid/jqGrid/问题/ 52 我创建了样式

  .jqgrid-inlineedit-element {
 font-size：1em ！重要; 
 box-sizing：border-box; 
身高：100％; 
 width：100％
} 
  

并将此样式添加到输入并选择元素使用

  class =ui-widget-content jqgrid-inlineedit-element
  

在colmodel中。

Hovewer jqgrid自动应用这个类来形成编辑，这会导致表单编辑中的高度字段过宽和过小（见下文） 。
如何解决这个问题，使得

  height：100％; 
 width：100％
  

不适用于表单编辑，字体大小适用于两者吗？

我试图通过从类中删除宽度和高度并使用colmodel添加它们来解决此问题。

  style =width：100％; height：100％，
  

但jqgrid也适用于表单编辑，因此表单编辑仍然损坏。
也许某些css选择器只能在内联编辑中应用jqgrid-inlineedit-style样式。

解决方案

意思是仅用于内联编辑或单元格编辑的设置的使用。表单编辑中不会有任何更改。因此，CSS规则可以像

  .jqgrow> td input.editable，
 .jqgrow> td select.editable，
 .jqgrow> td textarea.editable {
 height：auto; 
宽度：100％; 
 font-size：1em; 
 box-sizing：border-box; 
 
 $ / code> 

您可以添加

< pre class =lang-css prettyprint-override> .jqgrow> td select.editable，
height：100％;
}


如果您希望显示< select> 的高度为100％。您可以考虑在上述规则中删除 .editable 部分。 editable 类将仅用于内联编辑元素

最后一句：我将所有CSS设置从 ui.jqgrid.css 在免费的jqGrid中，这样就几乎不存在！important 里面（excepton覆盖了CSS规则在jQuery UI CSS中定义）。所以你可以修改设置而不必使用！important 。

jqgrid font size is increasing according to answer from How to change the font size in jqGrid?

using

.ui-jqgrid tr.jqgrow td {
    font-size: 1.2em;
}

Unfortunately this does not change inline and form editing element font sizes.

I'm looking for a wayto occupy whole cell contents in free jqgrid inline editing and increase font sizes in both form and inline editing.

According to https://github.com/free-jqgrid/jqGrid/issues/52 I created style

.jqgrid-inlineedit-element {
    font-size: 1em !important;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

and added this style to input and select elements using

class = "ui-widget-content jqgrid-inlineedit-element"

in colmodel. Inline editing now has nice bigger elements.

Hovewer jqgrid applies this class automatically to form editing also and this causes too wide and too small height fields in form editing (see below). How to fix this so that

height: 100%;
width: 100%

does not apply to form editing and font size applies to both?

I tried to fix this by removing width and height from classes and adding them in colmodel using

                        style = "width:100%;height:100%",

but jqgrid applies this also in form editing so form editing is still corrupted. Maybe some css selector can used to apply jqgrid-inlineedit-element style only in inline editing.

解决方案

What I mean is the usage of the settings for inline editing or cell editing only. You will have no changes in form editing. So the CSS rule could be like

.jqgrow > td input.editable,
.jqgrow > td select.editable,
.jqgrow > td textarea.editable {
    height: auto;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

You can add

.jqgrow > td select.editable,
    height: 100%;
}

if you prefer to show <select> with the 100% height. You can consider to remove .editable part in the above rules. The class editable will be added only for inline editing elements

The last remark: I modified all CSS settings from ui.jqgrid.css in free jqGrid so that there are exist almost no !important inside (the excepton is overwriting CSS rule defined in jQuery UI CSS). So you can modify the settings without have to use !important.

这篇关于如何使元素大小填充单元格大小并增加免费jqgrid内联和表单编辑中的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！