Caret is displayed over the selected text

[qorsmond]

Hi, I forked a plunker http://plnkr.co/edit/AXWty48bKXWEzzJwOQwI?p=preview that puts the ui-select in a inline form, but the problem is that the caret is displayed over the text.

What is the recommended solution to this?

I tried to change the caret position but then it is not displayed correctly when using in a non inline form:

[keithharvey]

This is a decent solution if you don't mind setting a width.

.form-inline .form-control { width: 200px; }

[germanger]

+1

[germanger]

I'd recommend adding a new class, so that the other ".form-inline" in your application stay unaltered.

   <form class="form-inline form-inline-with-uiselect">
             ...
   </form>

And style same as @keithharvey

    .form-inline-with-uiselect .form-control { width: 200px; }

[istibekesi]

I think this solution does not solve the issue, even worst: selected text content simply overflows booth the caret and the select-box too. http://plnkr.co/edit/DLzS7cpyGtZEJJyKT4IQ?p=preview

[i-am-david-fernandez]

I had what I think is a similar issue (caret overlapping the text) and I resolved it by adding padding:

.ui-select-match-text, .ui-select-placeholder {
    padding-right: 16px;
}

The original plunker doesn't display the issue (the selects aren't inline/horizontally-stacked) so perhaps this won't work for you, but in my use this keeps space between the text (either the placeholder or the selection) and the caret whether the select widget is in the context of an inline form or on its own. The amount of padding can, of course, be tweaked to suit. Note that this doesn't enforce a fixed element width, so in the case of inline elements, for example, the widget will resize to fit its contents. Hope this helps.

Edit: My mistake. I see your issue in the plunker now (my window was too small and the selects were rendered on separate lines). Unfortunately, the padding hack doesn't correct your issue here. I note that that plunker uses v0.7.0 of ui-select, while I'm using v0.12.0 (the latest). I don't know if that's causes differences between what I get locally and what's happening with the plunker.

[i-am-david-fernandez]

Ok, see this plunker. This is forked from the latest "official" demo plunker which uses v0.11.2. Not the latest ui-select, but recent enough that my suggested fix works. I don't know when it happened, but somewhere between v0.7.0 and v0.11.2 the nodes that are generated in a ui-select element changed quite a bit (for example, there was no ui-select-placeholder class in v0.7.0).

Also note the hack in the second select that makes the inline form-control look correct by way of the padding: 0px; border: none; styling (compare this to the first select which just looks terrible).

[yaojingguo]

+1

[wesleycho]

I've seen this issue for work as well - a co-worker used a component that hackily modified some styles, adding a class with overflow: hidden; text-overflow: ellipsis; where appropriate.

Would be nice to have a CSS fix in the library itself.

[stnor]

.input-group > .selectize-control > .selectize-input {
  margin-right: 10px;
}

.selectize-control.single .selectize-input:after {
  right: 5px;
}