I have some content which is usually displayed, but the user can edit it by clicking an icon. Please see http://jsbin.com/kotesudenu for a demo.

How should the user be able save the data and close the editor, and cancel and close the editor.

EDIT. Here is a thought. Add a "Save", "Cancel", and "Close" button to the editor. The "Save" and "Cancel" is originally greyed out and inactive. If the text is changed, "Save" and "Cancel" become active and "Close" is greyed out. Or maybe combine "Cancel" and "Close", originally just have "Close", and when the text is changed, change the "Close" button to "Cancel". It might look like http://jsbin.com/ciyusaguco, but close/cancel is not yet working. Thoughts?

2 Answers 2


Not to get too meta here, but how about the approach used on ux.stackexchange?

Using these two buttons Save Edits and Cancel would allow you to meet your requirements. Additionally you could disable the Save Edits button until an edit has been made.

Applied mockups:

Before edit: enter image description here

After edit: enter image description here

  • Thanks Midas. Nice use of this site for a UX example. Need to make sure that the save/edit/cancel is associated with the particular inline edit portion. Did you see my second example demo? I think I might want it on the toolbar, but not really sure yet. Mar 29, 2016 at 15:37
  • @user1032531 updated with some mockups of how it could work
    – Midas
    Mar 29, 2016 at 16:11

Here are some ideas from the Minton - Responsive Admin Dashboard Template that you might want to consider, they have a component called the X-editable that forms a part of the form UI components, and it illustrates the behaviour of save and cancel behaviour for inline editing.

Disclaimer: I just happened to be using it for some related work, so I am not promoting it in any way, just want to illustrate how they handle inline editing.

enter image description here

enter image description here

  • Thanks Michael. Totally off topic, but what is the difference between their inline and popover editor? Mar 30, 2016 at 3:51
  • @user1032531 As you can see from the two images that I attached with the answer, the inline editor works like a collapsible component that opens up under the content you want to edit whereas the popover editor creates a modal that overlays the active screen.
    – Michael Lai
    Mar 30, 2016 at 5:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.