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

Question

如何在免费的 jqgrid 编辑和添加表单中增加字体和编辑元素的大小，以便它们与 Bootstrap 中的大小相同。 Twitter Bootstrap 允许使用表单组和表单控件类创建具有事件元素高亮的良好编辑元素，例如

<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 例如。