1

I have a dropdown list of options that I'm getting from the DB. The option data being returned is very long strings of data. I'd like to max out the width of the options. 

<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
        <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
            <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
        </select>
</span>

I used a CSS snippet from another question: Change width of select tag in Twitter Bootstrap

Where I'm changing the width of the select box:

.selectwidthauto {
    width:50% !important;
        text-overflow:ellipsis;
        display: inline-block;
}

However, only the select container seems to be controlled (in width). When the options get loaded I'm still getting the full width of the text that is in the options (which contains very long strings).

How can I get my options to match the width of the select (which in this case is 50%), or any size other than full width (auto)?

Just incase what I wrote isn't explained well enough. I created a fiddle that although is not in Angular it describes what is happening:

https://jsfiddle.net/tm1qasjg/3/

I need the option values to cut off the text at a certain size. I don't want it to display the entire text value.

Community
  • 1
  • 1
webdad3
  • 8,893
  • 30
  • 121
  • 223
  • This is really an HTML question and not really Bootstrap. Options element size can be set but the option element will resize to fit the longest string. I have hit this issue myself from time to time. Possible solutions might be to use something other than standard select like creating your own list select. You also could possibly have a short label name and add the full string to a title attribute in option tag...not sure how cross browser this would be. I think I would be tempted to roll my own select then strings could just wrap in a list item. – orangeh0g May 30 '16 at 14:23
  • @orangeh0g - Yeah I wasn't sure if there was a bootstrap solution to this or not. Thanks for responding. – webdad3 May 30 '16 at 14:29

2 Answers2

0

Your code change width, a bit, but change! If you would put a full width you can use width: 100%, use:

.selectwidthauto {
    text-overflow:ellipsis;
    display: inline;
    width: 100%;
}
<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
        <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
            <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
        </select>
</span>

The property width: auto not equal to width: 100%, width: auto is the default value.

Rebbit
  • 1
  • 1
  • Thanks for your answer, but this doesn't appear to be what I'm looking for. I added a fiddle for further clarification. Please see the update in the question. – webdad3 May 30 '16 at 15:27
0

old question but i ended up doing it this way: {{sValue.Name.substring(0,200)}} shorter data makes for shorter option

can add label to show full selection

Nats
  • 1