Apply improved CSS that corrects the layout of autocomplete text fields
diff --git a/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt b/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt
new file mode 100644
index 0000000..8496047
--- /dev/null
+++ b/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 hyspace (Shawn Zhou)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/tapestry-core/NOTICE.txt b/tapestry-core/NOTICE.txt
index 9fd093a..1be4a14 100644
--- a/tapestry-core/NOTICE.txt
+++ b/tapestry-core/NOTICE.txt
@@ -35,4 +35,7 @@
This product includes Moment.js, distributed under the MIT License.
https://github.com/moment/moment
+This product includes typeahead.js-bootstrap3.less, distributed under the MIT License.
+https://github.com/hyspace/typeahead.js-bootstrap3.less
+
diff --git a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java
index c2688ea..03a96da 100644
--- a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java
+++ b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java
@@ -119,7 +119,7 @@
writer.attributes("autocomplete", "off");
}
- @Import(stylesheet="Autocomplete.css")
+ @Import(stylesheet="typeahead-bootstrap3.css")
void afterRender()
{
Link link = resources.createEventLink(EVENT_NAME, context);
diff --git a/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css b/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css
deleted file mode 100644
index 72ef7f6..0000000
--- a/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/** From https://gist.github.com/bhays/6140058, and modified */
-
-.twitter-typeahead .tt-query,
-.twitter-typeahead .tt-hint {
- margin-bottom: 0;
-}
-
-.tt-hint {
- display: block;
- width: 100%;
- height: 34px;
- padding: 6px 12px;
- font-size: 14px;
- line-height: 1.428571429;
- color: #999;
- vertical-align: middle;
- background-color: #ffffff;
- border: 1px solid #cccccc;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-}
-
-.tt-dropdown-menu {
- min-width: 160px;
- margin-top: 2px;
- padding: 5px 0;
- background-color: #ffffff;
- border: 1px solid #cccccc;
- border: 1px solid rgba(0, 0, 0, 0.15);
- border-radius: 4px;
- -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
- background-clip: padding-box;
-
-}
-
-.tt-suggestion {
- display: block;
- padding: 3px 20px;
-}
-
-.tt-suggestion.tt-cursor {
- color: #fff;
- background-color: #428bca;
-}
-
-.tt-suggestion.tt-cursor a {
- color: #fff;
-}
-
-.tt-suggestion p {
- margin: 0;
-}
\ No newline at end of file
diff --git a/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css b/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css
new file mode 100644
index 0000000..fde7cb9
--- /dev/null
+++ b/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css
@@ -0,0 +1,189 @@
+/*
+ * typehead.js-bootstrap3.less
+ * @version 0.2.3
+ * https://github.com/hyspace/typeahead.js-bootstrap3.less
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+.has-warning .twitter-typeahead .tt-input,
+.has-warning .twitter-typeahead .tt-hint {
+ border-color: #8a6d3b;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-warning .twitter-typeahead .tt-input:focus,
+.has-warning .twitter-typeahead .tt-hint:focus {
+ border-color: #66512c;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+}
+.has-error .twitter-typeahead .tt-input,
+.has-error .twitter-typeahead .tt-hint {
+ border-color: #a94442;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-error .twitter-typeahead .tt-input:focus,
+.has-error .twitter-typeahead .tt-hint:focus {
+ border-color: #843534;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+.has-success .twitter-typeahead .tt-input,
+.has-success .twitter-typeahead .tt-hint {
+ border-color: #3c763d;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-success .twitter-typeahead .tt-input:focus,
+.has-success .twitter-typeahead .tt-hint:focus {
+ border-color: #2b542c;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+}
+.input-group .twitter-typeahead:first-child .tt-input,
+.input-group .twitter-typeahead:first-child .tt-hint {
+ border-bottom-left-radius: 4px;
+ border-top-left-radius: 4px;
+}
+.input-group .twitter-typeahead:last-child .tt-input,
+.input-group .twitter-typeahead:last-child .tt-hint {
+ border-bottom-right-radius: 4px;
+ border-top-right-radius: 4px;
+}
+.input-group.input-group-sm .twitter-typeahead .tt-input,
+.input-group.input-group-sm .twitter-typeahead .tt-hint {
+ height: 30px;
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px;
+}
+select.input-group.input-group-sm .twitter-typeahead .tt-input,
+select.input-group.input-group-sm .twitter-typeahead .tt-hint {
+ height: 30px;
+ line-height: 30px;
+}
+textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
+textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
+select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
+select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
+ height: auto;
+}
+.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
+.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
+ border-radius: 0;
+}
+.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
+.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
+.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
+}
+.input-group.input-group-lg .twitter-typeahead .tt-input,
+.input-group.input-group-lg .twitter-typeahead .tt-hint {
+ height: 46px;
+ padding: 10px 16px;
+ font-size: 18px;
+ line-height: 1.33;
+ border-radius: 6px;
+}
+select.input-group.input-group-lg .twitter-typeahead .tt-input,
+select.input-group.input-group-lg .twitter-typeahead .tt-hint {
+ height: 46px;
+ line-height: 46px;
+}
+textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
+textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
+select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
+select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
+ height: auto;
+}
+.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
+.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
+ border-radius: 0;
+}
+.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
+.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
+ border-bottom-left-radius: 6px;
+ border-top-left-radius: 6px;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
+.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px;
+}
+.twitter-typeahead {
+ width: 100%;
+}
+.input-group .twitter-typeahead {
+ display: table-cell !important;
+ float: left;
+}
+.twitter-typeahead .tt-hint {
+ color: #999999;
+}
+.twitter-typeahead .tt-input {
+ z-index: 2;
+}
+.twitter-typeahead .tt-input[disabled],
+.twitter-typeahead .tt-input[readonly],
+fieldset[disabled] .twitter-typeahead .tt-input {
+ cursor: not-allowed;
+ background-color: #eeeeee !important;
+}
+.tt-dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1000;
+ min-width: 160px;
+ width: 100%;
+ padding: 5px 0;
+ margin: 2px 0 0;
+ list-style: none;
+ font-size: 14px;
+ background-color: #ffffff;
+ border: 1px solid #cccccc;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ background-clip: padding-box;
+ *border-right-width: 2px;
+ *border-bottom-width: 2px;
+}
+.tt-dropdown-menu .tt-suggestion {
+ display: block;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: 1.42857143;
+ color: #333333;
+ white-space: nowrap;
+}
+.tt-dropdown-menu .tt-suggestion.tt-cursor {
+ text-decoration: none;
+ outline: 0;
+ background-color: #f5f5f5;
+ color: #262626;
+}
+.tt-dropdown-menu .tt-suggestion.tt-cursor a {
+ color: #262626;
+}
+.tt-dropdown-menu .tt-suggestion p {
+ margin: 0;
+}
\ No newline at end of file
