[Editable Columns][New Feature] Show a <span> or <div> instead of <input> before and after editing

[skpr-repo]

Hello everybody. I'm working with Editable Columns. A customer asked to show the content of every text column inside the list datatable with full length, without ellipsis. Since the editable_text column shows an input with style="text-overflow: ellipsis;", I tweaked the component to work this way:

1. When the data loads, the input is hidden with class="d-none"
2. I added a span with the column value, before the input
3. When the user clicks on the span (column value), the span hides with d-none and the input appears (remove d-none)
4. When the input loses focus (onblur), it disappears and the span appears
5. When the input content is saved, the span innerHTML is updated with the current input content

For my needs the span (or a div) is more versatile and easier to style. I can also show prefix or suffix (like currency symbol on prices).

Everything can be done just overriding the editable_text.blade.php and the minor_update_client_logic.blade.php (for the js functions to show and hide)

It works well in modal and details_row, too.

It's also easy to add a parameter to choose between input or span (or div) for each editable_text control.

If you want I can share the code (it's just a few lines of code).

Thanks

[tabacitu]

Hmmm I believe you can achieve the same thing by doing limit => 9999 on it, or something like that. Or changing the width. Isn't that right @promatik ? Do you see a better solution than this?

[skpr-repo]

Hi! The span or div has other advantages:

1. The text can be multi-line
2. The text can have prefix and suffix
3. Any custom css or formatting can be applied in an easier way
4. It's very easy to implement see examples: https://www.awesomescreenshot.com/video/10293884?key=09c41c54041154a9dfe2394caef67f1c

if there are disadvantages or code/gui conflicts that I'm missing, please let me know!

Thanks

[tabacitu]

Hey @skpr-repo ,

I'm cleaning up issues that we haven't tackled. Sorry for not closing this sooner, but I don't think we should do this in the columns themselves. Changing the input to div or span would also make the column smaller/bigger, which you can see in your video as well. I think this makes for an unpolished/messy look. I think most people would benefit from how it is currently, so let's keep it like that.

I'm glad we kept it simple, and you can make changes in your own code, to have it in your project like you want it 😉 That's one of the reasons Backpack is so great, it's easy to customize.

Apologies for taking so much time to give a final reply to this. Cheers!