inline editing with select - changes row height

nampord

When placing a select dropdown in a cell for inline editing the row height changes when the user activates the cell for editing.
This issue can be seen in the standard example at

https://editor.datatables.net/examples/inline-editing/join.html

when selecting the last column (location) the row height changes slightly -
With the bootstrap theme this issue becomes much more pronounced

Is there a way to change the padding of the cell to 0px when the select is opened and set it back to the original value once the selects is closed ?

rf1234

In your HTML you would need to assign the class "dropDownCol" (or whatever you want to call it) to the column.

<th class="dropDownCol">blablabla</th>

Then assign a class to each cell in the column with the dropdown:
https://datatables.net/reference/option/columns.className
e.g. "dropDownColCell". You can specify a class as the target. No column number is needed.

columnDefs: [    
    { targets: "dropDownCol", className: "dropDownColCell" },
],

Then you can add a class to the cell that sets padding to 0px.
https://datatables.net/reference/api/cell().node()

Like this for example:

...................
$('#yourTable').on('click', '.dropdownColCell', function (e) {
    var dropDownCell = yourTable
                         .cell($(this).closest('tr'), ".dropDownCol")
                         .node();
    $( dropDownCell ).addClass( 'noPadding' );
)};

Don't have the time right now to figure out which event to use to get rid of the class when moving away ...