0

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

Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
user999684
  • 705
  • 2
  • 10
  • 23
  • It would help here if we actually had some HTML and CSS from your code to work with, otherwise we are guessing and likely less than optimal. https://stackoverflow.com/help/minimal-reproducible-example Anytime you use `!important` it is likely somehthing is wrong – Mark Schultheiss Dec 08 '19 at 15:30
  • Where does "element.style" come from and how to I override it? – user999684 Dec 09 '19 at 00:55
  • element.style shows any inline styles on that inspected element. Inline styles override CSS. More here: https://stackoverflow.com/questions/28353386/what-is-element-style-and-why-is-it-overriding-my-css-settings/28353450#:~:targetText=element.,override%20that%20declarations%20by%20using%20! – Nathaniel Flick Dec 09 '19 at 01:44
  • This might give you some place to work from https://stackoverflow.com/a/28286277/125981 – Mark Schultheiss Dec 09 '19 at 12:57
  • The style basic https://github.com/jquery/jquery-ui/blob/master/themes/base/autocomplete.css – Mark Schultheiss Dec 09 '19 at 12:59

1 Answers1

0

You must normal instead wrap.

white-space: normal !important;

Ankush
  • 184
  • 6