fix autocomplete css for zendesk theme

GeoffroyHusson · Oct 12, 2013 · 65d6fb4 · 65d6fb4
1 parent 9008887
commit 65d6fb4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/css/tagit.ui-zendesk.css b/css/tagit.ui-zendesk.css
@@ -54,3 +54,45 @@ ul.tagit input[type="text"] {
     font-size: 1.1em;
 }
 
+/* Forked from a jQuery UI theme, so that we don't require the jQuery UI CSS as a dependency. */
+.tagit-autocomplete.ui-autocomplete { position: absolute; cursor: default; }
+* html .tagit-autocomplete.ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+.tagit-autocomplete.ui-menu {
+    list-style:none;
+    padding: 2px;
+    margin: 0;
+    display:block;
+    float: left;
+}
+.tagit-autocomplete.ui-menu .ui-menu {
+    margin-top: -3px;
+}
+.tagit-autocomplete.ui-menu .ui-menu-item {
+    margin:0;
+    padding: 0;
+    zoom: 1;
+    float: left;
+    clear: left;
+    width: 100%;
+}
+.tagit-autocomplete.ui-menu .ui-menu-item a {
+    text-decoration:none;
+    display:block;
+    padding:.2em .4em;
+    line-height:1.5;
+    zoom:1;
+}
+.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover,
+.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active {
+    font-weight: normal;
+    margin: -1px;
+}
+.tagit-autocomplete.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff 50% 50% repeat-x; color: #222222; }
+.tagit-autocomplete.ui-corner-all, .tagit-autocomplete .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
+.tagit-autocomplete .ui-state-hover, .tagit-autocomplete .ui-state-focus { border: 1px solid #999999; background: #dadada; font-weight: normal; color: #212121; }
+.tagit-autocomplete .ui-state-active  { border: 1px solid #aaaaaa; }
+
+.tagit-autocomplete .ui-widget-content { border: 1px solid #aaaaaa; }
+.tagit .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px,1px,1px,1px); }
+
+
diff --git a/examples.html b/examples.html
@@ -27,8 +27,8 @@
 
     <!-- jQuery and jQuery UI are required dependencies. -->
     <!-- Although we use jQuery 1.4 here, it's tested with the latest too (1.8.3 as of writing this.) -->
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
 
     <!-- The real deal -->
     <script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>

diff --git a/js/tag-it.js b/js/tag-it.js
@@ -299,6 +299,8 @@
                 }).bind('autocompleteclose.tagit', function(event, ui) {
                     that.tagInput.data('autocomplete-open', false)
                 });
+
+                this.tagInput.autocomplete('widget').addClass('tagit-autocomplete');
             }
         },
 

diff --git a/js/tag-it.min.js b/js/tag-it.min.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -299,6 +299,8 @@ @@
                     }).bind('autocompleteclose.tagit', function(event, ui) {
                         that.tagInput.data('autocomplete-open', false)
                     });
+                    this.tagInput.autocomplete('widget').addClass('tagit-autocomplete');
                 }
             },
@@ Expand Down @@