PCHR-3460: UI Improvement for Option Groups

[ajesamson]

Overview

After adding tool icon for some of the option groups in Job Role, dropdown list for those options were not properly displayed. This fixed the issue.

Before

After

Technical Details

Initially css class crm_custom-select--full which was removed has been restored and bootstrap col added for proper arrangement of elements.

<div class="form-group">
   <label for="newDepartment" class="col-xs-4 control-label">Department:</label>
   <div class="col-xs-6">
      <div class="form-inline">
         <div class="crm_custom-select crm_custom-select--full">
             <ui-select
                  prevent-animations
                  ng-model="jobroles.editData['new_role_id']['department']"
                  theme="civihr-ui-select"
                  title="Choose a Department">
                     <ui-select-match prevent-animations allow-clear placeholder="Select a department">{{$select.selected.value.title}}</ui-select-match>
                    <ui-select-choices prevent-animations repeat="department.value.value as (key,department) in jobroles.DepartmentsData | filter: { value: { title: $select.search }}">
                        <div ng-bind-html="department.value.title | highlight: $select.search"></div>
                    </ui-select-choices>
             </ui-select>
          </div>
        </div>
   </div>
    <div class="col-xs-1">
          <a class="pointer">
               <i class="crm-i fa-wrench" ng-click="jobroles.openOptionsEditor('hrjc_department')"></i>
           </a>
     </div>
</div>

---

✅Manual Tests - passed

[deb1990]

Initially css class crm_custom-select--full was restored

Please add the commit or PR, where it was removed.

Also the wrench icon looks off center(slighty upwards). It was not like that in the before screenshot.

[deb1990]

DIV should be be present under span. Also there is no need of this span, you can directly add the ng-showto the div itself.

[deb1990]

DIV should be be present under span. Also there is no need of this span, you can directly add the ng-showto the div itself.

[deb1990]

DIV should be be present under span. Also there is no need of this span, you can directly add the ng-showto the div itself.

[deb1990]

DIV should be be present under span. Also there is no need of this span, you can directly add the ng-showto the div itself.

[deb1990]

there are two spaces before ng-show

[deb1990]

there are two spaces before ng-show