Ionic popover position issueIonic Popover positioning over text inside Tinymce v4

@sahil6111 wrote:

I am using Tinymce v4 editor in an Ionic angular app. when the user types the text after hitting enter, $ionicPopover containing html is generated dynamically which should be positioned next to the text but it is positioned at the top left side of the page as shown in screenshot.

what i have tried so far: i am replacing the text matched by a regex with

'<span class="scripture-text" style="font-weight: bold;">TEXT</span>'

after that dynamic $ionicPopover is created and shown using class '.scripture-text'.

var template = "<ion-popover-view class=\"scripture-popver\"><ion-content><h3>" + text + "</h3><div>" + scriptureText + "</div></ion-content><div class=\"bar bar-footer\"><h3 class=\"add-scripture title\" ng-click=\"addScriptureToText('" + passage + "')\">ADD</h3></div></ion-popover-view>";
console.log("template: ", template);
$scope.scripturePopover = $ionicPopover.fromTemplate(template, {
  scope: $scope
});
var iframe = document.getElementsByTagName('iframe');
var innerDoc = iframe[0].contentDocument || iframe[0].contentWindow.document;
$scope.scripturePopover.show(angular.element(innerDoc.querySelector('.scripture-text')));

But Tinymce adds it's own html(iframe) along with the textarea which contains the text typed along with html. So popover is shown but at top-left of page.

Popover should be aligned to the text replaced.

Any help will be appreciated.

Posts: 1

Participants: 1

Read full topic