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

Question

根据 How to change the font size in 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%
}

并使用

将此样式添加到 input 和 select 元素

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

在科尔模型中。内联编辑现在有更大的元素。

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

height: 100%;
width: 100%

不适用于表单编辑并且字体大小适用于两者？

我试图通过从 classes 中删除宽度和高度并使用

在 colmodel 中添加它们来解决这个问题

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

但是 jqgrid 也将此应用于表单编辑，因此表单编辑仍然损坏。也许一些 css select 或者只能在内联编辑中应用 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部分。 class editable 将仅为内联编辑元素添加

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

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

How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

html

css

jquery

jqgrid

free-jqgrid