How to apply CSS style for Angular JS drop down

Question

Hi I have an requirement to show the Dropdown using angular JS.

In this drop down some values are having some 250 characters so dropdown becomes very big in size and the whole page itself becomes very big in size so I want to control this using some CSS styles but i dont know to do it for angular Js select drop down.

  <table>
   <tr>
    <td>
      <select ng-model="newrelatedFault" ng-options="item.FaultIdAndName for item in relatedFaults track by item.Id | filter: Fault.relatedFaults.isSelected(item)">
       <option value="">@selectLabel</option>
       </select>
     </td> <td>
     <a ng-click="Fault.relatedFaults.add(newrelatedFault.Id, newrelatedFaultDescription); newrelatedFault = null; newrelatedFaultDescription = null;" ng-disabled="newrelatedFault == null" class="btn btn-link btn-action"><i class="icon-plus" title="Add New"></i>Add</a>
                    </td>
                </tr>
            </table>

css does not change with angular.. its the same way to apply css without angular — harishr
– harishr, Commented Jan 25, 2017 at 9:41
you can use some custom dropdowns like github.com/jseppi/angular-dropdowns and trim the characters using css ellipsis — Sajan Mullappally
– Sajan Mullappally, Commented Jan 25, 2017 at 9:48

Yvonne Aburrow · Accepted Answer · 2017-01-25 09:50:10Z

1

You could use a truncation with an ellipsis, as described in this article by Chris Coyier.

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

A bunch more techniques here, including multi-line ellipsis.

answered Jan 25, 2017 at 9:50

Yvonne Aburrow

2,7771 gold badge22 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply CSS style for Angular JS drop down

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related