q-select with input and large option label

[labs20]

Hi. Is there an option to apply some kind of ellipsis to a selected label option in q-select?

When you have a label too wide for the select view, the span wraps and breaks the layout:

The extra white line, caused by the search input being pushed away by the label is also bad.

Is there a property so I can change this behaviour?

Thanks.

[turigeza]

@labs20 I know it’s not a solution you are asking for but why not go single column layout at this screen width ? It would be nicer looking and you could still see what is selected.

If you still prefer the ellipsis instead check out this pen.
https://codepen.io/turigeza/pen/oNbqeMb?editors=1010

<q-select v-model="model" :options="options" label="Standard">
  <template v-slot:selected-item="scope">
    <div class="ellipsis">{{scope.opt}}</div>
  </template>
</q-select>

[labs20]

Hi! Thanks for your answer.

Yes, you know. Every project has its own quirks, and just happens that this is the minimum size before it turns in one comp per line, so…

Anyway, thanks for the slot suggestion. I’ll try it, but I think this would do better as a native prop.

Thanks.

[metalsadman]

can also do with css class

.selectedText
  .q-field__native span
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

maybe post a feature request for something like selected-class/style. so can just do something like selected-class="ellipsis".

[labs20]

@metalsadman Thanks for the tip.

It works well, but the use-input prop makes that the input keeps present even after the comp lost focus, and a blank “line” ends up added to the component area, breaking the layout.

This combo of props kinda deals with the problem:

        use-input
        fill-input
        hide-selected

[metalsadman]

@labs20 well, you could’ve mentioned that in the beginning (a snippet or a codepen preferably), could’ve just use input-class="ellipsis" which is already in the api .

[labs20]

Well, in my first post it is clear that I was having a problem with the “new line” produced by the input.

I’ve readed the input-class description and it was not that obvious for me that it was the solution. I’ll try it later but I suspect that it alone will not do it.

Thanks anyway.