Set search box size to fit placeholder text.

examples/sqla/app.py

@@ -117,10 +117,16 @@ class PostAdmin(sqla.ModelView):
     column_labels = dict(title='Post Title')  # Rename 'title' column in list view
     column_searchable_list = [
         'title',
-        User.first_name,
-        User.last_name,
         'tags.name',
+        'user.first_name',
+        'user.last_name',
     ]
+    column_labels = {
+        'title': 'Title',
+        'tags.name': 'tags',
+        'user.first_name': 'user\'s first name',
+        'user.last_name': 'last name',
+    }
     column_filters = [
         'user',
         'title',

flask_admin/static/admin/css/bootstrap3/admin.css

@@ -108,3 +108,23 @@ body.modal-open {
 {
     overflow-x: auto;
 }
+
+[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/bootstrap3/admin/model/layout.html

@@ -58,7 +58,7 @@
     <div class="clearfix"></div>
 {% endmacro %}
 
-{% macro search_form(input_class="col-md-5") %}
+{% macro search_form() %}
 <form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search">
     {% for flt_name, flt_value in filter_args.items() %}
     <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
@@ -72,14 +72,19 @@
     {% if sort_desc %}
     <input type="hidden" name="desc" value="{{ sort_desc }}">
     {% endif %}
+    {%- set full_search_placeholder = _gettext('Search') %}
+    {%- set min_size = config.get('FLASK_ADMIN_SEARCH_SIZE_MIN', 30) %}
+    {%- set max_size = config.get('FLASK_ADMIN_SEARCH_SIZE_MAX', 100) %}
+    {%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}{% endif %}
+    {%- set input_size = [[full_search_placeholder | length, min_size] | max, max_size] | min %}
     {% if search %}
     <div class="input-group">
-        <input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}{% if search_placeholder %}: {{ search_placeholder }}{% endif %}">
+        <input type="search" name="search" value="{{ search }}" class="form-control" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
         <a href="{{ clear_search_url }}" class="input-group-addon clear"><span class="fa fa-times glyphicon glyphicon-remove"></span></a>
     </div>
     {% else %}
     <div class="form-group">
-        <input type="text" name="search" value="" class="{{ input_class }} form-control" placeholder="{{ _gettext('Search') }}{% if search_placeholder %}: {{ search_placeholder }}{% endif %}">
+        <input type="search" name="search" value="" class="form-control" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
     </div>
     {% endif %}
 </form>