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

Question

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

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

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

但是免费的 jqgrid 不支持那些类。

我按照

.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

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

Answer 2

尝试使用

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

到 increase/change 编辑对话框（以及 jqGrid 的其他对话框）的 body 字体大小。

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

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

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

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

How to increase font size and element height if free jqgrid form edit

css

jquery

jqgrid

twitter-bootstrap

free-jqgrid