How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

问题

jqgrid font size is increasing according to answer from How to change the font size in jqGrid?

using

.ui-jqgrid tr.jqgrow td {
    font-size: 1.2em;
}

Unfortunately this does not change inline and form editing element font sizes.

I'm looking for a wayto occupy whole cell contents in free jqgrid inline editing and increase font sizes in both form and inline editing.

According to https://github.com/free-jqgrid/jqGrid/issues/52 I created style

.jqgrid-inlineedit-element {
    font-size: 1em !important;
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

and added this style to input and select elements using

class = "ui-widget-content jqgrid-inlineedit-element"

in colmodel. Inline editing now has nice bigger elements.

Hovewer jqgrid applies this class automatically to form editing also and this causes too wide and too small height fields in form editing (see below). How to fix this so that

height: 100%;
width: 100%

does not apply to form editing and font size applies to both?

I tried to fix this by removing width and height from classes and adding them in colmodel using

                        style = "width:100%;height:100%",

but jqgrid applies this also in form editing so form editing is still corrupted. Maybe some css selector can used to apply jqgrid-inlineedit-element style only in inline editing.

回答1:

What I mean is the usage of the settings for inline editing or cell editing only. You will have no changes in form editing. So the CSS rule could be like

.jqgrow > td input.editable,
.jqgrow > td select.editable,
.jqgrow > td textarea.editable {
    height: auto;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

You can add

.jqgrow > td select.editable,
    height: 100%;
}

if you prefer to show <select> with the 100% height. You can consider to remove .editable part in the above rules. The class editable will be added only for inline editing elements

The last remark: I modified all CSS settings from ui.jqgrid.css in free jqGrid so that there are exist almost no !important inside (the excepton is overwriting CSS rule defined in jQuery UI CSS). So you can modify the settings without have to use !important.

来源：https://stackoverflow.com/questions/29874598/how-to-make-element-sizes-to-fill-cell-sizes-and-increase-font-in-free-jqgrid-in

标签

jquery

html

css

jqgrid

free-jqgrid