# Contenteditable on side menu does not work

**URL:** <https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195>\
**Category:** ionic-v1\
**Created:** [April 19, 2014, 10:07pm UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195 "2014-04-19T22:07:57Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![chip4x](https://avatars.discourse-cdn.com/v4/letter/c/f07891/32.png) [@chip4x](https://forum.ionicframework.com/u/chip4x)\
**Post date:** [April 19, 2014, 10:07pm UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/1 "2014-04-19T22:07:57Z")

</div>

It seems that contenteditable is not working if I’m using side-menu. Here’s a sample code:

```
<ion-side-menus>
<ion-side-menu-content>

    <div contenteditable="true">hello</div>
</ion-side-menu-content>

<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>

```

It looks like there are some gestures that are preventing contenteditable to work.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [April 20, 2014, 1:13pm UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/2 "2014-04-20T13:13:03Z")

</div>

I was able to make it work here : [http://codepen.io/calendee/pen/FszDc](http://codepen.io/calendee/pen/FszDc)

---

<div class="post-metadata">

**Author:** ![chip4x](https://avatars.discourse-cdn.com/v4/letter/c/f07891/32.png) [@chip4x](https://forum.ionicframework.com/u/chip4x)\
**Post date:** [April 21, 2014, 4:24am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/3 "2014-04-21T04:24:19Z")

</div>

Thank you very much for your reply.

Actually the problem only happens inside the content (not the menu). I tried to edit your codepen to add a `<div contenteditable="true">` inside `<ion-content>` and it doesn’t work. I cannot edit anything inside the div

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [April 21, 2014, 10:47am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/4 "2014-04-21T10:47:45Z")

</div>

Ahhh… I see.

I’ve re-opened Issue # 421 with an explanation of how it only works AFTER you change browser tab.

> <https://github.com/ionic-team/ionic/issues/421>

---

<div class="post-metadata">

**Author:** ![chip4x](https://avatars.discourse-cdn.com/v4/letter/c/f07891/32.png) [@chip4x](https://forum.ionicframework.com/u/chip4x)\
**Post date:** [April 21, 2014, 11:28pm UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/5 "2014-04-21T23:28:34Z")

</div>

Thanks @Calendee! I’ll keep track of that issue

---

<div class="post-metadata">

**Author:** ![hanthomas](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hanthomas](https://forum.ionicframework.com/u/hanthomas)\
**Post date:** [May 12, 2014, 5:27pm UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/6 "2014-05-12T17:27:54Z")

</div>

I encountered the same issue on beta4, but found a workaround for our project:

In your HTML view:

```
<ion-side-menu-content>
      <div contenteditable="true" ng-click="focus($event)">Something</div>
</ion-side-menu-content>

```

In your controller:

```
$scope.focus = function (e) {
    var selection = window.getSelection();
    var range = document.createRange();
    var element = e.srcElement;
    range.setStart(element, 0);
    range.setEnd(element, 0);
    selection.removeAllRanges();
    selection.addRange(range);
};

```

The basic idea is to force the cursor into the content area by handling the click event on the editable DIV and setting tis selection range. Hopefully this helps until the developers fix the real problem.

---

<div class="post-metadata">

**Author:** ![mav](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mav](https://forum.ionicframework.com/u/mav)\
**Post date:** [September 8, 2014, 10:48am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/7 "2014-09-08T10:48:57Z")

</div>

Hi,

how do i set the courser at the last position of the text? Every new click event set it to the first position of the div-element.

…hope this bug will be fixed soon. So we can use contenteditable & sidemenus. 🙂

regards  
mav

---

<div class="post-metadata">

**Author:** ![neychang](https://avatars.discourse-cdn.com/v4/letter/n/4da419/32.png) [@neychang](https://forum.ionicframework.com/u/neychang)\
**Post date:** [September 27, 2014, 6:08am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/8 "2014-09-27T06:08:30Z")

</div>

thanks a lot ,@hanthomas,but when i press Enter, the text in the newline can’t be selected, could you tell me what’s wrong with that??

---

<div class="post-metadata">

**Author:** ![taromorimoto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/taromorimoto/32/77959_2.png) [@taromorimoto](https://forum.ionicframework.com/u/taromorimoto)\
**Post date:** [March 23, 2015, 9:49am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/9 "2015-03-23T09:49:06Z")

</div>

Hey, the contenteditable does not react to clicks on Safari on OSX. Would be nice to get it to work on Safari as well.

[http://codepen.io/calendee/pen/FszDc](http://codepen.io/calendee/pen/FszDc) works on Chrome 41.0.2272.101 but not on Safari 8.0.4.

---

<div class="post-metadata">

**Author:** ![tajinderlogiciel](https://avatars.discourse-cdn.com/v4/letter/t/ce7236/32.png) [@tajinderlogiciel](https://forum.ionicframework.com/u/tajinderlogiciel)\
**Post date:** [November 14, 2019, 6:05am UTC](https://forum.ionicframework.com/t/contenteditable-on-side-menu-does-not-work/3195/10 "2019-11-14T06:05:53Z")

</div>

I have similar issue with contenteditable div not properly working in ios ionic  
anyone have any solution