Ace: autoComplete popup container option

Created on 2 Feb 2017  ·  4Comments  ·  Source: ajaxorg/ace

I am using ace editor inside jquery layout. It woks very well. How ever I have implemented A full screen functionality and in full screen mode, autocomplete popup does not appear since it is appeded to body while in my case <div id="main-container"> is in full screen mode.

In full screen mode, I presses ctrl+space and then manually moved <div class=" ace_editor ace_autocomplete ace-tomorrow"> inside <div id="main-container"> and it seems to work fine with correct position.

Is it possible to define a container for autoComplete popup so i can give it <div id="main-container"> as container instead of body which will solve this problem IMO.

Complete Code: (save as .html)
use button full screen in center pane

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>ACE Autocompletion demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }

      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <!-- html -->
    <div class="myDiv" style="height:800px">
      <div class="ui-layout-center">Center
        <button id="fullscreenButton" type="button">Full-Screen</button>
      </div>
      <div class="ui-layout-north">North</div>
      <div class="ui-layout-south">South</div>
      <div class="ui-layout-east"> code Mirror
        <div id="main-container">
          <div id="editor">Type in a word like "will" below and press ctrl+space or alt+space to get "rhyme completion"</div>
        </div>
      </div>
      <div class="ui-layout-west">West</div>
    </div>
    <!-- ace-plugin -->
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- layout.jquery-plugin -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" />
    <script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-1.3.0.rc30.80.js"></script>
    <!-- jquery-fullscreen-plugin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-fullscreen-plugin/1.1.4/jquery.fullscreen-min.js"></script>
    <script>
      //
      // setup ace editor
      function setupAce() {
        // trigger extension
        ace.require("ace/ext/language_tools");
        var editor = ace.edit("editor");
        editor.session.setMode("ace/mode/html");
        editor.setTheme("ace/theme/tomorrow");
        // enable autocompletion and snippets
        editor.setOptions({
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: false
        });
        $("#fullscreenButton").click(function(event) {
          $("#main-container").toggleFullScreen();
        });
      }
      // init layout
      $('.myDiv').layout({
        resizeWhileDragging: true,
        resizable: true,
        east: {
          size: 800
        },
        onload_end: function() {
          setupAce();
        }
      });
      //
    </script>
  </body>

</html>
language_tools
Source
picture mafar
👍1

Most helpful comment

A workaround that works with current version of ace is to add 

        function getPopup() {
            if (!editor.completer) {
                var Autocomplete = ace.require("ace/autocomplete").Autocomplete
                editor.completer = new Autocomplete()
            }
            editor.completer.editor = editor
            editor.completer.$init()

            return editor.completer.popup.container;
        }
        document.onfullscreenchange = function(event) {
            var popup = getPopup();
            if (document.fullscreen)
                $("#main-container")[0].appendChild(popup);
            else
                document.body.appendChild(popup);
        }
picture nightwing on 4 Mar 2019
👍3

All 4 comments

+1

antonpodolsky picture antonpodolsky on 18 Mar 2018

Is there a workaround for this issue?

Wolf-Rost picture Wolf-Rost on 4 Mar 2019

A workaround that works with current version of ace is to add 

        function getPopup() {
            if (!editor.completer) {
                var Autocomplete = ace.require("ace/autocomplete").Autocomplete
                editor.completer = new Autocomplete()
            }
            editor.completer.editor = editor
            editor.completer.$init()

            return editor.completer.popup.container;
        }
        document.onfullscreenchange = function(event) {
            var popup = getPopup();
            if (document.fullscreen)
                $("#main-container")[0].appendChild(popup);
            else
                document.body.appendChild(popup);
        }
nightwing picture nightwing on 4 Mar 2019
👍3

Thanks @nightwing

Maybe move 

  editor.completer.editor = editor
  editor.completer.$init()

inside if statement

if (!editor.completer) {

since this way it will instantiate multiple autocompleters (and you would end up with multiple number of them in the DOM).

slavede picture slavede on 20 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

narraressan picture narraressan  ·  3Comments
christianbs picture christianbs  ·  3Comments
gsf picture gsf  ·  6Comments
jakub-zawislak picture jakub-zawislak  ·  3Comments
vbguyny picture vbguyny  ·  5Comments