Editor inline edit icon hidden if text is truncated

asle

I am implementing on my own page from the example https://editor.datatables.net/examples/inline-editing/editIcon.html. When I use this css to truncate the text from this post, the text is truncated but the edit icon is also hidden.

table.dataTable.compact tbody td {  
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Also I wonder how to submit edit of inline textarea. Do I have to use "submit on blur" since enter will only give a new line?

allan

You could do something like:

table.dataTable tbody td {
  position: relative;
}

table.dataTable tbody td i {
  position: absolute;
  top: 3px;
  right 3px;
}

Allan

asle

Thanks Allan for your suggestion. The edit icon overlayed the text since it is absolute positioned. Padding-left made some room for the icon on my textarea input.

table.dataTable tbody td.comment {
  position: relative;
  padding-right:20px;
}

I still am not able to save the input as textarea. I tried to use onBlur: 'submit'but this does not work. I have put this into a editor example page.
I tried this here. Changed the "Position" field to textarea. How can I submit the textarea?

$('#example tbody').on( 'click', 'td i', function (e) {
    e.stopImmediatePropagation(); // stop the row selection when clicking on an icon
    editor.inline( $(this).parent( {
        onBlur: 'submit' 
          }) ); 
       } );        

allan

The code you have is wrong there - it is passing onBlur to the jQuery parent() method, rather than as the second parameter to inline().

Try:

editor.inline( $(this).parent(), {
  onBlur: 'submit'
} );

It is also possible to show a submit button inline.

Allan

asle

Yes, I see it now! Thanks again! I also looked at the submit button inline. Will consider it now

asle

Allan, after your suggestion I added the submit button and I think that is a better UX experience. I show the pencil on the field the user can "fast-edit" and when editing, the small submit button presents a clear save/submit action. Sometimes save-on-blur is not so intuitive! So maybe this can help others specially with an inline textarea element.
Function for creating the pencil icon:

var editIcon = function ( data, type, row ) {
        if ( type === 'display' ) {
            return data + ' <i class="fa fa-pencil"/>';
        }
        return data;
    };

Specify what column is editable inline:

columns: [
            { data: "first_name", render: editIcon },  //editable
            { data: "last_name" },  //not editable

Function to trigger editable on the pencil icon and then showing the small submit button

$('#example tbody').on( 'click', 'td i', function (e) {
        e.stopImmediatePropagation(); // stop the row selection when clicking on an icon
        editor.inline( $(this).parent(), {
            buttons: { label: '>', fn: function () { this.submit(); } }
        } ); 
        } );

Then of course the CSS to avoid overlapping text over icon. I had a class "comment" on the specific <td> so else just -> table.datTable tbody td { ... }

table.dataTable tbody td.comment {
  position: relative;
  padding-right:20px;
}

allan

Many thanks for sharing your solution

Allan