Content Comparison

...

• Use disabled tag within input, which will automatically pull in disabled input styling

  Code Block
  language html
  <input matInput type="text" disabled="disabled"> OR <input matInput type="text" disabled>

Inline Editing/Saving Text and Select Inputs

Normally, changes are made to the contents of an input and within corresponding panel footer, there will be a ‘Save’ button to save the changes.

However, there are a few instances where we do not have this ‘whole panel' save button, where instead inputs are saved on a change by change basis. This is achieved through an ‘inline’ set of controls to allow the enabling, changing and saving of an inputs content.

1. Click the ‘edit’ button to enable the input
   

   Image Added

2. Enter the new value
   

   Image Added

3. Click the ‘save’ button on the input
   

   Image Added

4. New value is saved without having to click a ‘whole panel’ save button
   

   Image Added

This method means that sensitive/impactful input values require a few purposeful UX interactions in order to be able to edit and save values, therefore preventing mistakes and errors. Currently, inline input editing is used on:

• Advertisers > Advertiser > Value Transforms Table

• Advertisers > Advertiser > Validations Lists Table

• Campaign > Processr Table

• Leads > Lead Profile Modal > Profile Tab Table [Development In Progress]