Currently, I am dealing with a dashboard that consists of multiple panels. Due to the abundance of information on the dashboard, each panel has a restricted width.
Within these panels, there is a table displaying certain users along with an Angular dropdown selector for adding more users.
The issue arises when selecting a user with a name longer than the width of the box. This causes the box to expand, subsequently pushing the panel and adjacent button out of place, sometimes even causing overlap.
Here's what the element looks like in the markup:
<td>
<select chosen style="font-size: 75%" options="users" id="selectedTechnicianUser" ng-model="selectedUser" ng-change="addUser(selectedUser)" class="form-control" search-contains="true" display-selected-options="false" ng-options="<query...>">
</select>
</td>
To address this issue, I would prefer if the long names were truncated with something like [Jonathan LEI...] inside the box, or by reducing the font size as I have tried before.
I would greatly appreciate any assistance with resolving this matter.