CODEWITHSUNDEEP
jqueryjquery-uidartpolymerdart-polymer
Roman
Roman

Reputation: 2175

Polymer + JQuery UI + Dart: Autocomplete doesn't work properly

I faced with the following vexing problem: the sample of code from http://jqueryui.com/autocomplete/ doesn't work properly when it used inside a polymer element. I expect that dropdown will be shown in the bottom of the input element but this appears at the top of the page.. The autocomplete works fine in an entry page as expected. Please see code bellow. What's wrong in my code of polymer element? Can I use JQuery UI together Dart Polymer? Can you suggest me any workaround to pal up polymer and JQuery Autocomplete? I use the latest version of dart, dart-polymer library and JQuery UI.

Dart Editor version 1.5.1.release (STABLE)
Dart SDK version 1.5.1
Dart-Polymer version 0.11.0+5
JQuery UI version 1.11.0

The entry page:

page

Autocomplete from the entry page - works incorrectly!

Autocomplete from the polymer element!

Autocomplete from the entry page - works fine

Autocomplete from the entry page

Please see also the source code of this example.

Code:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>

    <!-- import the click-counter -->
    <link rel="import" href="autocomplete.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>

    <!-- JQuery UI -->
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
      $(function() {
      var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
      ];
      $( "#tags" ).autocomplete({
      source: availableTags
      });
      });
  </script>     
  </head>
  <body>
    <h1>Autocomplete JQuery UI Autocomplete issue!</h1>

    <p>Polymer Element version of Autocomplete</p>
    <div>
      <cc-autocomplete count="5"></cc-autocomplete>
    </div>

    <br />

    <p>Entry Page version of Autocomplete</p>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>

  </body>
</html>

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="cc-autocomplete">   
  <template>
    <link rel="stylesheet" href="jquery-ui.css">

    <!-- JQuery Autocomplete in the polymer element -->
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
  </template>

  <script>
    Polymer('cc-autocomplete', {
      ready: function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        $(this.$.tags).autocomplete({
          source: availableTags
        });
      }
     });
  </script>    
  <script type="application/dart" src="autocomplete.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

@CustomTag('cc_autocomplete')
class MyAutocomplete extends PolymerElement {
  MyAutocomplete.created() : super.created();
}

Upvotes: 0

Views: 660

Answers (1)

Robert
Robert

Reputation: 5662

As you are using it in a polymer element positions will be calculated differently.

jquery-ui.css says:

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

That's why it will be in the wrong position. jQuery UI won't be able to determine the correct position from the actual body to your DOM Element because ShadowDOM is intended to hide those information. You would have to position it yourself by calculating the correct offsets yourself.

Regards, Robert

Upvotes: 2

Related Questions