Search code examples
jquerycssjquery-ui-autocomplete

jQuery UI Auto Complete wrap results

When using autocomplete with narrow screens, the results end up in a window that you need to scroll right and left to see them. I added a max-width to .ui-autocomplete.ui-menu and set a smaller font and now the results are only as wide as the screen, but does not wrap and the information to the right is hidden. I set .ui-menu-item to wrap, but in chrome developer tools, when I look at the element style, under element.style it still says nowrap and my entry is marked out. I am not sure what element.style is or how to override it. I tried the !important flag, but that did not help. Any suggestions on either how to override that style or a better way of making the results wrap?

Ok, here is more: I am using the default jQuery UI JS and CSS. I added: this CSS at the end of my head:

.ui-autocomplete.ui-menu{
 max-width:90%;
 }

 .ui-menu-item{
  white-space:wrap!important;
  overflow-wrap: break-word;
  word-break: break-all;
  }

Here is the dev console css info: Dev console css

Solution

  • You must normal instead wrap.

    white-space: normal !important;