Editor + Bootstrap + Inline Edit

som81

Hi,

Great job on the new versions on DataTables + Editor!

I felt the double outline on an in-focus cell which was being inline edited wasn't quite right. I suspect the plain DataTables css and Bootstrap css are being overlaid.

Included a screenshot here: http://imgur.com/vEJiQ4o
No JS Fiddle as I'm using a licensed version of Editor.

I've had to override the following CSS:

table.dataTable th.focus, table.dataTable td.focus {
    outline: none;
}

Just a suggestion for future.

Thanks!

allan

Thanks for flagging this up (and also for your kind works).

Its a good point! I'm feeling slightly uncertain what the correct way to go here is since the Bootstrap focus is quite noticeable in its styling and it might be that some users will what to retain that consistent look and feel.

I'll have a think about this before committing it in - although I am leaning to adding your change into the code!

Regards,
Allan

taylor5042

Allan, I am having this same issue also.
While this fix helps, the border still causes the row size to increase during the inline edit.
This jumping around is not desired.
How would I eliminate the size changes completely?

allan

You probably need to set a height on the row, which will be based on the height of the element that is inserted (and styled by Bootstrap).

For example, on this page if you run:

    $('#example').on( 'click', 'tbody td', function (e) {
        editor.inline( this );
    } );

to enable inline editing, you can see the vertical shift when clicking in a cell. Seeing a height of 30px more or less resolves it. Obviously the table takes up more space that way.

Two other options are:

1. Reduce the height required by the Bootstrap styled element
2. Use Bubble editing.

Allan