Inline editing with Bootstrap 3

sliekens

The inline editing works nicely with the default styling, but it looks awful when using the Bootstrap 3 styles.

Example (click cells to edit) http://live.datatables.net/datoxopi/3/edit?output

The inline input fields don't stretch to use the full width and height of the cell.

allan

Your example doesn't look too bad to me (screenshot attached). There is a bit of misalignment at the bottom that I'll look into.

Allan

sliekens

That misalignment is caused by a placeholder div for inline field errors.

<div data-dte-e="form_error" class="DTE_Form_Error"></div>

The DTE_Form_Error class has margin-top: 10px. Here's what the table looks like without the error placeholder.
http://live.datatables.net/datoxopi/6/edit?css,output

But removing that extra margin isn't enough for me. The "Simple inline editing" example still looks much better than what I have.
https://editor.datatables.net/examples/inline-editing/simple.html

See how the input fields make better use of the available cell width and height in that example? At least it seems that way to me.

allan

If you add:

div.DTE_Inline div.DTE_Field input.form-control {
    height: 34px;
}

That helps: http://live.datatables.net/datoxopi/7/edit . I'll get that into the repo - and the margin-top issue.

The cell padding is what is causing it to be noticeably smaller than "100%" of the total cell width. That is particularly obvious in the Bootstrap case because of the cell border.

I've removed that in the above link and it matches closer the DataTables styling.

Allan

sliekens

Thanks. Perhaps change 34px to 'inherit' so the height is always relative to the cell height.

sliekens

Could you add a class to the <td> element when it is being edited? I would like to set padding-left and padding-right to 0 when the cell contains a text input field.

I managed to do it in JavaScript using the preOpen and preClose events, but perhaps you can put this in the source.

http://live.datatables.net/datoxopi/11/edit?output

See how the input fields stretch to the borders of the cell? This looks much better in my opinion, because input fields have their own padding.

There is still an issue with the error placeholder not being hidden on blur (or close in general), but that's a logical error rather than a styling issue.

allan

Perhaps change 34px to 'inherit' so the height is always relative to the cell height.

I hadn't realised that was an option! It isn't quite perfect since if the cell has two rows of text, it doesn't just expand to fit, but that certainly looks like a better option that a hard coded value.

Could you add a class to the <td> element when it is being edited? I would like to set padding-left and padding-right to 0 when the cell contains a text input field.

That does look good. I had tried that using negative margins on the input element, but that didn't work.

I don't really want to modify the cell's class, but it might be the only way. I'll look into it before the 1.6.1 release.

There is still an issue with the error placeholder not being hidden on blur

I think the best way to handle that will be to use the :empty CSS pseudo selector and make the margin top 0 when it is empty. Then we don't need to modify the error element at all.

Allan

sliekens

The :empty selector did the trick.

.DTE_Form_Error:empty {
  display: none !important;
}

I had to use !important because there is a routine somewhere that adds styles directly to the DOM element when an error occurs.

class="DTE_Form_Error" style="display: block; opacity: 1;"

If these styles can be removed when the editor is closed then the !important keyword is not needed.

sliekens

I ended up writing code that toggles class "editing" on the <td> tag when it contains an inline editor. (using open/close events)

<td class="editing">...</td>

Then I created a style for that class to remove all padding from the cell.

td.editing {
    padding: 0 !important;
}

Then I removed all the styles that set negative margins on inline fields (in editor.bootstrap.css).

div.DTE_Inline div.DTE_Field input[type="color"],
div.DTE_Inline div.DTE_Field input[type="date"],
div.DTE_Inline div.DTE_Field input[type="datetime"],
div.DTE_Inline div.DTE_Field input[type="datetime-local"],
div.DTE_Inline div.DTE_Field input[type="email"],
div.DTE_Inline div.DTE_Field input[type="month"],
div.DTE_Inline div.DTE_Field input[type="number"],
div.DTE_Inline div.DTE_Field input[type="password"],
div.DTE_Inline div.DTE_Field input[type="search"],
div.DTE_Inline div.DTE_Field input[type="tel"],
div.DTE_Inline div.DTE_Field input[type="text"],
div.DTE_Inline div.DTE_Field input[type="time"],
div.DTE_Inline div.DTE_Field input[type="url"],
div.DTE_Inline div.DTE_Field input[type="week"] {
  /* obsolete with 0px padding inside cells */
  /* margin: -6px 0; */
  margin: inherit !important;
}

The result is much better if you ask me.