Inline editor for checkbox change the height of the row

nnachi

Hi

I have just purchased the editor and setup it but I have a problem with the inline editing for checkbox

Indeed, when I click on the checkbox, the row became bigger (please check screenshot)

Any clue for correcting the problem ?

Thanks

kthorngren

The inline editor basic example doesn't have this behavior. Maybe its a CSS issue?

A test case showing the issue would help to troubleshoot.

Kevin

allan

I looks like it is probably getting some padding, or something is showing below the checkbox. If you use your browser's development tools to take a look and see what the JSON response from the server is when you click the checkbox, what is it?

Allan

nnachi

Hi
For now, the application is running on local, I hard coded the JSON response into the html file with 1 or 0 values for the checkboxes

I inspected the code after clicking on the on the checkbox, and in my <td> element I have the following

<

div> generated

<td class=" dt-body-center">
    <div class="DTE DTE_Inline">
        <div class="DTE_Inline_Field">
            <div class="DTE_Processing_Indicator"><span></span></div>
            <div class="DTE_Field DTE_Field_Type_checkbox DTE_Field_Name_active"><label data-dte-e="label" class="DTE_Label" for="DTE_Field_active">Active<div data-dte-e="msg-label" class="DTE_Label_Info"></div></label>
                <div data-dte-e="input" class="DTE_Field_Input">
                    <div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;">
                        <div>
                            <div><input id="DTE_Field_active_0" type="checkbox" value="1"><label for="DTE_Field_active_0"></label></div>
                        </div>
                    </div>
                    <div data-dte-e="multi-value" class="multi-value" style="display: none;">Multiple values<span data-dte-e="multi-info" class="multi-info" style="display: none;">The selected items contain different values for this input. To edit and set all items for this input to the same value, click or tap here, otherwise they will retain their individual values.</span></div>
                    <div
                        data-dte-e="msg-multi" class="multi-restore" style="display: none;">Undo changes</div>
                <div data-dte-e="msg-error" class="DTE_Field_Error" style="display: none;"></div>
                <div data-dte-e="msg-message" class="DTE_Field_Message" style="display: none;"></div>
                <div data-dte-e="msg-info" class="DTE_Field_Info"></div>
            </div>
        </div>
        <div data-dte-e="form_error" class="DTE_Form_Error"></div>
    </div>

It seems that the label generated after the checkbox is causing the height increase of the row
<input id="DTE_Field_active_0" type="checkbox" value="1">
<label for="DTE_Field_active_0"></label>

Is it normal ?

Thx and regards

nnachi

Hi
I confirm that the label is the value defined on the fields list on the editor (check screenshot)
I have defined the checkbox field like in the example
{label: "Active", name: "active", type: "checkbox", separator: "|", options: [{label: 'AAA', value: 1}]},

Why this label is generated ?

nnachi

@kthorngren , thank you for your answer but the example does not have checkbox column with inline editing (the first column has a different behaviour)

There is an example with checkbox but it doesn't have the inline editor

Nazim

kthorngren

I have inline editing with checkboxes and don't see the issue. I make sure to turn off inline editing for that column. For testing I turned it back on and see the same behavior you are seeing. This is my code for the inline edit event:

    $('#edit-table').on( 'click', 'tbody td:not(:first-child, :nth-child(10))', function (e) {
        console.log('click');
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );

The first column is the row selector column and column 10 is the checkbox column.

Kevin

nnachi

Thank you @kthorngren ! Now it is working correctly
Indeed, we have to turn out the inline editing for the checkbox columns

Have a nice day