Fix dynamic select layout when help block is displayed

This fixes the layout of the dynamic select widget when the help
block is displayed. To reproduce this error you must be using the
keystone v2 API so that the Primary Project field will be required
when creating a user. If you leave it blank when submitting the
form the help block will be displayed.

Closes-Bug: #1361725
Change-Id: Ied4bb5d22b7e8a1948330503516cba2aa016417f

horizon/static/horizon/js/horizon.forms.js

@@ -116,17 +116,6 @@ horizon.forms = {
   }
 };
 
-horizon.forms.bind_add_item_handlers = function (el) {
-  var $selects = $(el).find('select[data-add-item-url]');
-  $selects.each(function () {
-    var $this = $(this);
-    $button = $("<a href='" + $this.attr("data-add-item-url") + "' " +
-      "data-add-to-field='" + $this.attr("id") + "' " +
-      "class='btn ajax-add ajax-modal btn-default'>+</a>");
-    $this.after($button);
-  });
-};
-
 horizon.forms.prevent_multiple_submission = function (el) {
   // Disable multiple submissions when launching a form.
   var $form = $(el).find("form");
@@ -199,9 +188,6 @@ horizon.addInitFunction(function () {
   horizon.forms.prevent_multiple_submission($('body'));
   horizon.modals.addModalInitFunction(horizon.forms.prevent_multiple_submission);
 
-  horizon.forms.bind_add_item_handlers($("body"));
-  horizon.modals.addModalInitFunction(horizon.forms.bind_add_item_handlers);
-
   horizon.forms.init_examples($("body"));
   horizon.modals.addModalInitFunction(horizon.forms.init_examples);
 

horizon/templates/horizon/common/_form_field.html

@@ -55,7 +55,20 @@
     {% endif %}
 
     <div class="{{ classes.value }} {{ field|wrapper_classes }}">
-      {{ field|add_bootstrap_class }}
+      {% with add_item_link=field|add_item_url %}
+      {% if add_item_link %}
+        <div class='input-group'>
+          {{ field|add_bootstrap_class }}
+          <span class="input-group-btn">
+            <a href="{{ add_item_link }}" data-add-to-field="{{ field.auto_id }}" class='btn btn-default ajax-add ajax-modal'>
+              <span class="glyphicon glyphicon-plus"></span>
+            </a>
+          </span>
+        </div>
+      {% else %}
+        {{ field|add_bootstrap_class }}
+      {% endif %}
+      {% endwith %}
       {% for error in field.errors %}
         <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
       {% endfor %}

horizon/templatetags/form_helpers.py

@@ -56,8 +56,10 @@ def is_file(field):
 
 
 @register.filter
-def is_dynamic_select(field):
-    return hasattr(field.field.widget, 'add_item_link')
+def add_item_url(field):
+    if hasattr(field.field.widget, 'get_add_item_url'):
+        return field.field.widget.get_add_item_url()
+    return None
 
 
 @register.filter
@@ -65,6 +67,4 @@ def wrapper_classes(field):
     classes = []
     if is_multiple_checkbox(field):
         classes.append('multiple-checkbox')
-    if is_dynamic_select(field):
-        classes.append('dynamic-select')
     return ' '.join(classes)

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -937,17 +937,6 @@ form label {
     display: inline-block;
 }
 
-form .form-group > div.dynamic-select {
-  display: table;
-  border-collapse: separate;
-  > * {
-    display: table-cell;
-  }
-  > a {
-    width: 1%;
-  }
-}
-
 .modal.fullscreen .modal-dialog {
   width: 90%;
   margin: auto;