Is there a way to zoom in on a text input field?

Question

Say I have an lightning input field in a table that looks like this in HTML.

<td><lightning-input key={row.key} data-key={row.key} value={row.aucNotes2} onblur={handleRowAction} name='auctionNotes' class='slds-p-bottom_small'>{row.aucNotes2}</lightning-input></td>

The problem I have, is a user can input information, but since it is in a table you have to scroll to see all the typing. This is a notes field so I want them to be able to click on it and see all the notes and make changes in like a bigger box if that makes sense. And then when they click out it updates the changes and goes back to the table view. I was wondering if there is a simple way to do this if that makes sense?

Answer 1

Data input on a table can be tricky because exactly what you're talking about; editability + display on large text bodies in parallel.

My suggestion would be to use the standard edit event/component for the record you're attempting to edit.

If you're using aura, check this out: https://developer.salesforce.com/docs/component-library/bundle/force:editRecord/documentation

For LWC you could try the record edit form: https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

Set up a button icon on the table row that will trigger the event or a modal with the record form contained inside. When the user is done editing and saves, you can capture that event and refresh the data in your table.