Inline editing with two submit buttons

IMS_Pete

While it is easy to have a submit button with inline editing, is it possible to also have a secondary button? for example a button that supplies a "blank" value?

Also is it at all possible to move the button above the inline input object? Currently the default seems to be that it appear to the right of the object and reduces the width of the input area.

https://editor.datatables.net/examples/inline-editing/submitButton

colin

You can do something like this - it adds that second button to clear the field.

Colin

colin

I just noticed the layout isn't good - I'll look into that and reply later.

allan

This little bit of CSS should do it:

th, td {
  white-space: nowrap;
}

div.DTE button.btn, div.DTE div.DTE_Form_Buttons button {
  float: none;
  display: inline-block;
}

http://live.datatables.net/daxolipi/2/edit

Allan

IMS_Pete

Thanks Colin, appreciate the assistance, we managed to get something similar but ran into the same styling issue.

Thanks Alan, the buttons now appear side by side which is much better.

However, the space that the submit button takes up on the right impacts the usability of the input field. This was always an issue but is now more noticeable.
Would it be possible to specify that the buttons appear above or below the input field? this would increase the height of the field which would be much more usable.

I've spent most of the day attempting this; I've been able to move the buttons left/right of the input but can't seem to get them on a separate line. Any help, even just letting me know it's not possible, would be much appreciated.

allan

div.DTE_Inline {
  display: block;
}

will stop the "table" layout that the inline editor uses to achieve the buttons next to the input. You'd then need a bit more styling to lay the buttons out nicely.

Space is always a problem with inline editing - that's why we also created bubble editing.

Allan