Width of the select when an item with large name is selected (question)

[germanger]

trafficstars

This is my ui-select:

<ui-select ng-model="selectedReceiver.selected" ng-disabled="fetchingReceivers || receivers.length == 0">
    <ui-select-match placeholder="">{{$select.selected.code}} - {{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="receiver in receivers | filterBy: ['name', 'code']: $select.search"> 
        <div ng-bind-html="receiver.name | highlight: $select.search"></div>
        <small>Code: <span ng-bind-html="receiver.code | highlight: $select.search"></span></small>
        <hr style="margin-top: 0px; margin-bottom: 0px; border-top: 1px solid #C0C0C0;"/>
    </ui-select-choices>
</ui-select>

When an item is selected, say:

     {
           code: "some large code",
           name: "some very large name, foo bar qux"
     }

the ui-select-match shows "some large code - some very large name, foo bar qux" (as expected), but this is so large that resizes the control (the <button> in which the directive is translated).

Question: Is there a setting for preventing this resize?

[blowsie]

Perhaps the use of text-overflow: ellipsis; could be of some use for a fix. https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

[blowsie]

Its worth looking at the clear selection button in this as well, It also has layout issues.

[blowsie]

After just a few lines of css;

.ui-select-match-text{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 40px;
}
.ui-select-toggle > .btn.btn-link {
  margin-right: 10px;
  top: 6px;
  position: absolute;
  right: 10px;
}

[blowsie]

Referencing https://github.com/angular-ui/ui-select/issues/975

[germanger]

hummm is not working for me.

Are those css definitions in a new css file after the ui-select css file? thats what I tried. Or are you overriding ui-select css file itself?

[germanger]

The following just worked for me.

.ui-select-match-text > span {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
}

I'm not touching original ui-select css file. This definitions are set after that. As you can see I'm targeting to the span that is inside .ui-select-match-text

[blowsie]

Perhaps we have a different version, but using width:80% is not a good idea. you should opt for padding , or similar instead

[firstdev]

I am having the same issue.

[rzschech]

This is needed for the ui-select-placeholder as well. I have:

.ui-select-placeholder, .ui-select-match-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 40px;
}

[uguryilmaz]

@germanger solution worked for me. thanks.

[wesleycho]

This is probably best added to the library itself - PRs welcome.

[Hesesses]

How to fix this when using multipleoption?

[DenisaSurdu]

@Hesesses , this is how I fixed it:

.ui-select-placeholder, .ui-select-match-text, .ui-select-match-item {
 	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 40px;
}

[germanger]

I've noticed a case in which this solution doesn't work...

Put the ui-select inside an input-group:

 <div class="input-group">
    <!-- ui select here... -->
    <span class="input-group-addon"><a href="" ng-click="selectedItem.selected = undefined" title="Clear"><span class="glyphicon glyphicon-remove"></span></a></span>
 </div>

I typically use these input-groups for optional selection.

Here is a screenshot within and without input-group

...Any help? thanks

EDIT: I've created a Plunkr: http://plnkr.co/edit/EWCTGawhdNIDQApaCBf9?p=preview

[lacivert]

I use the theme select2, ui-select doesn't even show the option with large text. I think it also have an issue with the theme selected

[germanger]

can this issue be opened? the Plunkr I created shows pretty clear that this is not solved

[Jefiozie]

Sure, could you also investigate the issue and maybe make a PR or provide enough information so that somebody can make the PR?

[halofourteen]

input-group class sets display: table; style in bootstrap css. So it's breaks element... Still can't find good solution to fix this.

[kevinah95]

@Hesesses another possibility can be:

.ui-select-placeholder,.ui-select-match-text,.ui-select-match-item{
  width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 20px;
}


.ui-select-multiple.ui-select-bootstrap .ui-select-match-item{
    width: auto;
    padding-right: 5px;
}

to fix label or tag width.

[harshikesh]

<ui-select ng-model="selectedReceiver.selected" ng-disabled="fetchingReceivers || receivers.length == 0">
    <ui-select-match placeholder="">{{$select.selected.code}} - {{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="receiver in receivers | filterBy: ['name', 'code']: $select.search"> 
        <div ng-bind-html="receiver.name | highlight: $select.search"></div>
        <small>Code: <span ng-bind-html="receiver.code | highlight: $select.search"></span></small>
        <hr style="margin-top: 0px; margin-bottom: 0px; border-top: 1px solid #C0C0C0;"/>
    </ui-select-choices>
</ui-select>

I am using 0.18.1 angular. How to fix the overflow text. note: I am restricted not to update angular.

[578305]

Using text-overflow: ellipsis; is fine but I want to view the text which is over flowing. How can I do that ? Can we use any tool tip kind of option so that when we hover we can see the whole text?

[blowsie]

title tag?