#15405 new bug ()

Opened June 24, 2021 02:12PM UTC

Last modified June 25, 2021 08:39AM UTC

Autocomplete scrollable shows scrollbar on hover over last item

Reported by: AnthonyHallSRP Owned by:
Priority: minor Milestone: none
Component: ui.autocomplete Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

If you go to the demo of autocomplete/scrollable results and type java, it shows two results. If you hover over the last one, a vertical scrollbar appears.The same happens in my project whenever you hover over the last item

Attachments (0)
Change History (1)

Changed June 25, 2021 08:39AM UTC by AnthonyHallSRP comment:1

Two things:

1 Sorry, I should have added that the bug appears in Firefox, IE, Edge and Chrome - I don't know about Safari

2 I do have a suggestion for a fix - it works in my case, and I think could be generalised. At the moment the css (from the base theme) adds a border to elements when they become active (and in other cases). It seems to try to compensate for this by setting the margin to -1. I would suggest that instead of doing that the default state should have a 1px border the same colour as the background. Then none of the state changes would affect the layout at all. In my project the following works

.ui-menu-item-wrapper{
  border:1px solid transparent;
}

.ui-menu .ui-menu-item-wrapper.ui-state-active{ 
  border:1px  solid #3c6f4d;
  background: #3c6f4d ;
  color:#ffffff;
  margin:0;
}