Editor Tab between fields offset blue border + CSS options for inline edit

rldean1

I'm following the article to Tab Between Columns. It works! Very cool.

But, In this example, you can see the blue border that's a bit askew. Looks like it's around the cell, and not the input.

How do I make that prettier?

Additionally: how might I further control the inputs' classes, to make it look more like a Bootstrap input?

Should I do it with the render function during Datatable initialization? How does that Datatables render function compete with Editor?

Also, also... in many of the examples, the inputs are perfect, and the row height is tight, and, well, perfect! Meaning, upon selection, the row doesn't grow in height.

In many of my implementations, there's a slight jumpiness, or movement in the row height, as you change position from one row to the next.

kthorngren

Since you are using Bootstrap 4 you will want to load the Editor BS4 CSS and JS files as shown in this example:
https://editor.datatables.net/examples/styling/bootstrap.html

Kevin

rldean1

@kthorngren

OK, thank you for that. I'm now closer to finalizing my project. However, there's still some issues.

Keys might be causing more issues than I previously noted.

1) If I remove "Keys" from DataTables, the weird blue border goes away during an inline-edit
2) I didn't previously catch this, but Keys was stopping the ability to start a Full-row edit, or a Delete. After removing Keys, you could start using the Edit and Delete buttons at anytime again. (Inline edit has never prevented this)
3) With the editor/boostrap JS/CSS files plugged in, the Full-row edit form has some weirdness, i.e.: the title is off-center, and the close button does not work.
4) During an inline edit, Inputs are not quite centered vertically in the cell.

rldean1

Oops, I forgot to leave a sample. Check out what happens when you comment/un-comment the Keys section:

http://live.datatables.net/ceyavapu/3

allan

You are loading the Bootstrap 3 integration code rather than the Bootstrap 4 (editor.bootstrap4) which is in part causing the issue: http://live.datatables.net/ceyavapu/4/edit .

That helps, but its not perfect. There appears to be something related to table-sm causing the rest of the issue. Remove the vertical-align: top fixes it, but that isn't table-sm. I've tried it locally but it seems to work here. Going to have to dig around a bit more on this one I'm afraid!

Allan