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

Solution 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 > tdinput.editable,
.jqgrow > td select.editable,
.jqgrow > tdtextarea.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.