Search code examples
jqueryhtmlcssjqgridfree-jqgrid

How to change background color of readonly field in edit form


Free jqgrid does not allow to change background color of readonly field in edit form.

There is style

.jqgrid-readonlycolumn {
    background-color: #FFFFDD;
}

which is specifed in colmodel editoptions:

editable: getReadOnlyEditable,
editoptions: { "readonly" : "readonly" , "class" : "grid-decimal-edit jqgrid-readonlycolumn" }


  function getReadOnlyEditable(options) {
if (options.mode === "cell" || options.mode === "add" || options.mode === "edit") {
    return false;
    }
// form editing
return "readonly";
 }

jqgrid adds those classes as first classes :

<td class="DataTD">
<input type="text" readonly="" 
   class="grid-decimal-edit jqgrid-readonlycolumn FormElement
          ui-widget-content ui-corner-all" 
    disabled="disabled" 
    id="Varadokumn" name="Varadokumn" role="textbox"></td>

after those classes ui-widget-content class appears which sets background color back to white.

How to fix this so that jqgrid-readonlycolumn class background color can used ?

Update

I tried to add style

body .DataTD .jqgrid-readonlycolumn {background-color: #FFFFDD !important;}

but background is still white


Solution

  • It's enough just to add background-image: none. Try to use

    .jqgrid-readonlycolumn {
        background-image: none;
        background-color: #FFFFDD;
    }