如何在免费的jqgrid内联和表单编辑中使元素大小填充单元格大小并增加字体

Question

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

使用

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

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

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

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

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

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

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

在colmodel中。内联编辑现在有了更大的元素。

悬停jqgrid也会自动将此类应用于表单编辑，这会导致表单编辑中的高度字段过宽和过小(见下文)。如何解决这个问题，使

height: 100%;
width: 100%

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

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

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

但jqgrid也将此应用于表单编辑，因此表单编辑仍然损坏。也许某些css选择器可以用于仅在内联编辑中应用jqgrid内联元素样式。

Answer 1

我的意思是使用设置进行内联编辑或仅进行单元格编辑。您在表单编辑中不会有任何更改。所以CSS规则可以像一样

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

您可以添加

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

若你们喜欢显示100%高度的<select>。您可以考虑删除上述规则中的.editable部分。editable类将仅为内联编辑元素添加

最后一句话：我在免费的jqGrid中修改了ui.jqgrid.css的所有CSS设置，使得里面几乎不存在!important(excepton覆盖了jQuery UI CSS中定义的CSS规则)。因此，您可以在不必使用!important的情况下修改设置。