Search code examples
jqgrid

jqGrid, checkbox not aligned to left on edit form. Bootstrap

I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?

Thanks in advance.

Solution

  • The reason for this is the setting in the bootstrap css

    .EditTable td input, 
.EditTable td select, 
.EditTable td textarea { 
    width: 98%; 
    display: inline-block;
}

    i.e this is caused from width:98%

    To correct this there are a lot of ways.

    The first one is to use editoptions to set a manual auto width with style options.

    edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},

    The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:

    <style>
    .EditTable td input[type="checkbox"] 
    {
        width :auto;
    }
</style>

    after loading the jqgrid bootstrap css file.