Twitter Bootstrap Question posted in

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

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 ?

Tags:

2

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search