0

How to increase font and editing elements sizes in free jqgrid edit and add forms so that they have same sizes as in bootstrap. Twitter bootstrap allows to create good editing elements with active element hightligh using form-group and form-control classes like

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

but free jqgrid does so use not support those classes.

I tried according to 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;
}

but this changes only inline edit. Form elements are still to small. How to make edit, add, view form elements also same size as in bootstrap ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

2 Answers2

1

Try to use

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

to increase/change the font size of the body of the edit dialogs (and other dialogs of jqGrid).

If you want don't change the font of buttons of the dialog form and need to set the font only on the top pato of the dialog with the Edit form then you can use the following selector instead

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

To change the font of the title bar you can use CSS selector .ui-jqdialog .ui-jqdialog-titlebar for example.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you. It worked. In header close button and caption vertical alignment is messed by few pixels. Is it better to use `font-size: 1rem` like in other answer ? – Andrus May 11 '15 at 07:03
  • @Andrus: You are welcome! The example with `16px` was just to see extremely clear that the changes work. – Oleg May 11 '15 at 07:35
0

Bootstrap sets the font size of the root element so you can use the rem css unit which refers to the font size of the root element

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

Otherwise the root font size of bootstrap is 14px

  • this will not change free jqgrid edit winow font. Some other selector, not td needs to be applied – Andrus May 10 '15 at 21:17