Как увеличить размер шрифта и высоту элемента, если редактировать форму jqgrid бесплатно

Как увеличить размер шрифта и элементов редактирования в бесплатных формах редактирования и добавления jqgrid, чтобы они имели такие же размеры, как в bootstrap. Начальная загрузка Twitter позволяет создавать хорошие элементы редактирования с подсветкой активных элементов, используя классы form-group и form-control, такие как

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

но бесплатный jqgrid не поддерживает эти классы.

Я пробовал в соответствии с Как настроить размеры элементов так, чтобы они заполняли размеры ячеек, и увеличить шрифт в бесплатной встроенной версии 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;
}

но это изменяет только встроенное редактирование. Элементы формы все еще слишком малы. Как сделать так, чтобы редактировать, добавлять, просматривать элементы формы того же размера, что и в начальной загрузке?


jquery css twitter-bootstrap jqgrid free-jqgrid
person Andrus    schedule 10.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй использовать

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

увеличить/изменить размер шрифта тела диалогов редактирования (и других диалогов jqGrid).

Если вы не хотите изменять шрифт кнопок диалоговой формы и вам нужно установить шрифт только в верхней части диалогового окна с формой редактирования, вы можете вместо этого использовать следующий селектор

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

Чтобы изменить шрифт строки заголовка, вы можете, например, использовать селектор CSS .ui-jqdialog .ui-jqdialog-titlebar.

person Oleg    schedule 11.05.2015
comment
Спасибо. Это сработало. В заголовке кнопка закрытия и вертикальное выравнивание заголовка испорчено несколькими пикселями. Лучше использовать font-size: 1rem как в другом ответе? - person Andrus; 11.05.2015
comment
@Andrus: Добро пожаловать! Пример с 16px был просто для того, чтобы предельно ясно увидеть, что изменения работают. - person Oleg; 11.05.2015

arrow_upward
0
arrow_downward

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;
}

В противном случае размер корневого шрифта начальной загрузки равен 14px.

person Community    schedule 10.05.2015
comment
это не изменит бесплатный шрифт jqgrid edit winow. Необходимо применить какой-то другой селектор, а не td - person Andrus; 11.05.2015