2

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。内联编辑现在有更好的更大元素。

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

height: 100%;
width: 100%

不适用于表单编辑和字体大小两者都适用？

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

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

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

4

1 回答 1

2

我的意思是仅使用内联编辑或单元格编辑的设置。您在表单编辑中不会有任何变化。所以 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%;
}

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

最后一句话：我修改ui.jqgrid.css了free jqGrid中的所有CSS设置，因此内部几乎不存在!important（异常是覆盖jQuery UI CSS中定义的CSS规则）。因此，您可以修改设置而不必使用!important.

于 2015-04-26T09:29:01.373 回答