Increase sixre of bootstrap2 search field, to show placeholder text.

flask_admin/static/admin/css/bootstrap2/admin.css

@@ -143,3 +143,23 @@ table.filters tr td {
 .editable-input .select2-container {
     min-width: 220px;
 }
+
+[placeholder]{
+    text-overflow:ellipsis;
+}
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    text-overflow:ellipsis;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    text-overflow:ellipsis;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    text-overflow:ellipsis;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    text-overflow:ellipsis;
+}

flask_admin/templates/bootstrap2/admin/model/layout.html

@@ -58,7 +58,7 @@
     <div class="clearfix"></div>
 {% endmacro %}
 
-{% macro search_form(input_class="span2") %}
+{% macro search_form() %}
 <form method="GET" action="{{ return_url }}" class="search-form">
     {% for flt_name, flt_value in filter_args.items() %}
     <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
@@ -72,17 +72,17 @@
     {% if sort_desc %}
     <input type="hidden" name="desc" value="{{ sort_desc }}">
     {% endif %}
+    {%- set full_search_placeholder = _gettext('Search') %}
+    {%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}{% endif %}
     {% if search %}
     <div class="input-append">
-            <input type="text" name="search" value="{{ search }}" class="{{ input_class }}" placeholder="{{ _gettext('Search') }}{% if search_placeholder %}: {{ search_placeholder }}{% endif %}">
+            <input type="search" name="search" class="input-xlarge" value="{{ search }}" placeholder="{{ full_search_placeholder }}">
             <a href="{{ clear_search_url }}" class="clear add-on">
                 <i class="fa fa-times icon-remove"></i>
             </a>
     </div>
     {% else %}
-    <div>
-        <input type="text" name="search" value="" class="{{ input_class }}" placeholder="{{ _gettext('Search') }}{% if search_placeholder %}: {{ search_placeholder }}{% endif %}">
-    </div>
+    <input type="search" name="search" class="input-xlarge" value="" placeholder="{{ full_search_placeholder }}">
     {% endif %}
 </form>
 {% endmacro %}