I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend beyond the width of the input fields. My goal is to align this box to the left side instead of its default right alignment.
<td style="width: 100px; vertical-align: text-top;">
<div class="multiSelect">
<form name="inputForm" >
<ui-select ui-grid-edit-ui-select ng-required="isRequired" ng-model="dr.dir" append-to-body="true"
multiple search-enabled="false" close-on-select="false" hide-tags="true" hide-caret="true"
ng-style="{height:grid.options.rowHeight -1 }"
class="gridSelect multi" uis-open-close="dropdownClosedResolve(isOpen,$select);" custom-driver-multiselect="dr">
<ui-select-match></ui-select-match>
<ui-select-choices repeat="field in fields" position="auto">
<!-- <div ng-bind-html="field.title"></div> -->
<div ng-bind-html="field.title" style="margin-right: 20px"></div>
<div ng-class={"Ac":$select.isActive(this)} class="x-file"></div>
</ui-select-choices>
</ui-select>
</form>
<div>
</td>
The CSS for this ui-select component remains at its default settings.