[Solved] autocomplete results width / overflow

[krsyoung]

Hi, I am successfully using the q-autocomplete component however the data that I return is quite long. I’m noticing on mobile displays that it overflows off the side of the screen. The main issue is that results with long strings that have the same starting characters can’t be differentiated between by the user.

Any advice from folks on how to work around this? (i.e. break lines, enable wrap on the autocomplete result list popover…)

Thanks!

[rstoenescu]

First thing coming to my mind is putting a max-width 90vw (or whatever). What version you on?

[krsyoung]

Hi @rstoenescu, will give that a try and report back. I’m on 0.13.10. Thanks!

[krsyoung]

I tried adding a max-width: 90vw on the item-content class, however that truncates the line (adds the ... at the end of the line). Applying the width to the list level just reduces the width of the overall list with the text still running off the screen.

Will keep poking around.

[krsyoung]

The winner for the moment (have not verified side effects …). I include the following in the view where the autocomplete is loaded:

<style>
.item {
  height: inherit;
  max-width: 95vw;
}

.q-popover .item:not(.two-lines):not(.three-lines):not(.multiple-lines)>.item-content>div:not(.stacked-label):not(.floating-label):not([class^=q-]) {
  white-space: normal;
}
</style>

Ugly due to the required specificity but it works.

[rstoenescu]

Can you try with v0.14 beta also please (without any additional CSS)?