fix(account): uiSelect rendering bugs (#1461)

This commit fixes rendering bugs with newer `uiSelect` and implements them on both the Simple Vouchers html file and the `bhAccountSelect` component. This issue is that `uiSelect`'s CSS selects all child `span` elements under the ui-select options rather than the first one. It sets them to be width `100%`, causing the browser to render any sibling elements unpredictably. This has been corrected by removing all children spans except for the main span element.
IMA-WorldHealth · Apr 6, 2017 · c7cecb8 · c7cecb8
1 parent b7a8aca
commit c7cecb8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/client/src/partials/templates/bhAccountSelect.tmpl.html b/client/src/partials/templates/bhAccountSelect.tmpl.html
@@ -13,7 +13,7 @@
       on-select="$ctrl.onSelect($item, $model)"
       ng-required="$ctrl.required">
       <ui-select-match placeholder="{{ ::'FORM.PLACEHOLDERS.ACCOUNT' | translate }}">
-        <strong>{{$select.selected.number}}</strong> <span>{{$select.selected.label}}</span>
+        <span><strong>{{$select.selected.number}}</strong> {{$select.selected.label}}</span>
       </ui-select-match>
       <ui-select-choices
         ui-select-focus-patch

diff --git a/client/src/partials/vouchers/simple.html b/client/src/partials/vouchers/simple.html
@@ -115,14 +115,14 @@
                    ng-model="SimpleVoucherCtrl.Voucher.store.data[0].account_id"
                    required>
                    <ui-select-match placeholder="{{ ::'FORM.PLACEHOLDERS.ACCOUNT' | translate }}">
-                     <strong>{{$select.selected.number}}</strong> <span>{{$select.selected.label}}</span>
+                     <span><strong>{{$select.selected.number}}</strong> {{$select.selected.label}}</span>
                    </ui-select-match>
                    <ui-select-choices
                      ui-select-focus-patch
                      ui-disable-choice="account.type_id === SimpleVoucherCtrl.bhConstants.accounts.TITLE"
                      repeat="account.id as account in SimpleVoucherCtrl.Voucher.accounts | filter: { 'hrlabel' : $select.search }">
-                     <strong ng-bind-html="account.number | highlight:$select.search"></strong>
-                     <span ng-bind-html="account.label | highlight:$select.search"></span>
+                    <strong ng-bind-html="account.number | highlight:$select.search"></strong>
+                    <span ng-bind-html="account.label | highlight:$select.search"></span>
                    </ui-select-choices>
                  </ui-select>
 
@@ -142,14 +142,14 @@
                    ng-model="SimpleVoucherCtrl.Voucher.store.data[1].account_id"
                   required>
                   <ui-select-match placeholder="{{ ::'FORM.PLACEHOLDERS.ACCOUNT' | translate }}">
-                    <strong>{{$select.selected.number}}</strong> <span>{{$select.selected.label}}</span>
+                    <span><strong>{{$select.selected.number}}</strong> {{$select.selected.label}}</span>
                   </ui-select-match>
                      <ui-select-choices
                        ui-select-focus-patch
                        ui-disable-choice="account.type_id === SimpleVoucherCtrl.bhConstants.accounts.TITLE"
                        repeat="account.id as account in SimpleVoucherCtrl.Voucher.accounts  | filter: { 'hrlabel' : $select.search }">
-                    <strong ng-bind-html="account.number | highlight:$select.search"></strong>
-                    <span ng-bind-html="account.label | highlight:$select.search"></span>
+                      <strong ng-bind-html="account.number | highlight:$select.search"></strong>
+                      <span ng-bind-html="account.label | highlight:$select.search"></span>
                   </ui-select-choices>
                 </ui-select>