Question

根据{{3}}

的回答，

jqgrid字体大小正在增加使用

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

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

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

根据How to change the font size in jqGrid?我创建的风格

.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样式。

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（除了覆盖jQuery UI CSS中定义的CSS规则）。因此，您无需使用!important即可修改设置。

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

1 个答案: