UPDATE. Never mind, my colleague helped me. I need to put the width on the select statement inside the td.


Hi everybody,

Attached please find the way the form looks now. I am having trouble increasing the width of the column with the dropdown. Even if I use px, they seems to be ignored.

Do you know what may I need to adjust to have the "Mode" column display correctly?

Here is my current code in the HTML:

<table id="searchTable" ng-show="results.length>0"
                           class="table table-responsive table-hover table-list"
                           style="width:800px;">
                        <thead>
                            <tr style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'>
                                <th ng-repeat="column in table.columns" ng-click="sort(column)"
                                    ng-attr-style="width:{{column.width + 'px;' }}">
                                    {{column.displayName === undefined?column.name:column.displayName}}
                                    <span class="pull-right" href="#" ng-show="column.name === table.sort">
                                        <i ng-class="{'fa fa-chevron-down': table.dir === 'asc', 'fa fa-chevron-up': table.dir === 'desc'}"></i>
                                    </span>
                                </th>

                                <th ng-repeat="licenseInfo in results[0].licenses">
                                    {{licenseInfo.licenseType}}
                                    <span ng-class="{'field-validation-error' : licenseInfo.totalUsed > licenseInfo.totalAllowed}">
                                    {{"(" + licenseInfo.totalUsed + " of " + licenseInfo.totalAllowed  + ")"}}</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="result in results" ng-form="licenseRow">
                                <td>
                                    {{ result.salespoint }}
                                </td>
                                <td>
                                    {{ result.id }}
                                </td>
                                <td>
                                    {{ result.description }}
                                </td>
                                <td>
                                    <select class="form-control" ng-model="result.mode" ng-change="updateMode(result, '{{result.mode}}' )"
                                            ng-options="s.modeId as s.description + ' (' + s.totalUsed + ' of ' + s.totalAllowed + ')'  for s in metaData.salespointModes"></select>
                                </td>
                                <td ng-repeat="licenseInfo in result.licenses">
                                    <input type="checkbox"
                                           ng-model="licenseInfo.activated"
                                           name="activated"
                                           id="activated"
                                           ng-change="licenseActivationChanged(result, licenseInfo)" />
                                </td>
                            </tr>
                        </tbody>
                       
                    </table>

Thanks a lot in advance.