How can I make a div non editable that’s within an editable div without taking away functionality?

Question

https://code.sololearn.com/WCZdatnWc25G/?ref=app
When you click the check button a check appears that I want to be noneditable and view only. I’ve tried changing contenteditable to false but this prevents typing on the document if you press the check mark as your first action and you can’t write on the same line as the check either. I’ve also tried setting the attribute of the div to read only but this doesn’t work and I’m not sure why. The issue is in Javascript at line 154. Any help is appreciated. Thanks

Answer 1

That's because your circle is a "block"-level element (a <div>) and those don't flow with the text.
Things that should be in line with the text need to be "inline" (like a <span>). Unfortunately plain inline elements don't have width and height; however CSS gives us the best of both worlds with `inline-block`. Long story short:

circle.style.display = 'inline-block';

will do it. Also you need to set contenteditable to false again :)

(By the way you should really do all of that in a stylesheet. `circle.classList.add('circle')` and then define `.circle` in the CSS tab!)