如果免费 jqgrid 表单编辑，如何增加字体大小和元素高度

Question

如何在免费的 jqgrid 编辑和添加表单中增加字体和编辑元素的大小，以便它们具有与引导程序中相同的大小。 Twitter bootstrap 允许使用 form-group 和 form-control 类（如

）创建具有活动元素高度的良好编辑元素

<div class="form-group">
<label for="Kellaaeg">Kell</label>
<input class="form-control" id="Kellaaeg" name="Kellaaeg">
</div>

但免费的 jqgrid 确实使用不支持这些类。

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

.jqgrow > td input[type=text].editable,
.jqgrow > td input[type=date].editable,
.jqgrow > td input,
.jqgrow > td textarea {
    height: 100%;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

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

但这只会改变内联编辑。表单元素仍然很小。 如何使编辑、添加、查看表单元素的大小也与 bootstrap 中的一样？

Answer 1

尝试使用

.ui-jqgrid .ui-jqdialog {
    font-size: 16px;
}

增加/更改编辑对话框（以及 jqGrid 的其他对话框）正文的字体大小。

如果您不想更改对话框表单按钮的字体，并且只需要在编辑表单对话框的顶部设置字体，那么您可以使用以下选择器来代替

.ui-jqgrid .ui-jqdialog .FormGrid {
    font-size: 16px;
}

例如，要更改标题栏的字体，您可以使用 CSS 选择器 .ui-jqdialog .ui-jqdialog-titlebar。

Answer 2

Bootstrap 设置根元素的字体大小，因此您可以使用rem css 单元，它指的是根元素的字体大小

.jqgrow > td input[type=text].editable,
.jqgrow > td input[type=date].editable,
.jqgrow > td input,
.jqgrow > td textarea {
    height: 100%;
    width: 100%;
    font-size: 1rem; /* 1rem instead of 1em */
    box-sizing: border-box;
}

.jqgrow > td select.editable,
.jqgrow > td select {
    width: 100%;
    font-size: 1rem; /* 1rem instead of 1em */
    box-sizing: border-box;
}

否则bootstrap的根字体大小为14px