0

如何在免费的 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 相同？

4

2 回答 2

1

尝试使用

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

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

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

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

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

于 2015-05-11T00:32:45.297 回答
0

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

于 2015-05-10T20:33:33.513 回答