codeEnthusiast codeEnthusiast - 6 months ago 21
Javascript Question

Remove default ui hyperlink behaviour

I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches. I have noticed that the

a
s in the drop down list move and shrink the UI menu by several pixels when hovered. Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:

.ui-menu .ui-menu-item a:hover{
background:none;
color:#FF0000;
font-size:10px;
}


Here is a fiddle of my progress so far https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/

Answer

So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus class on your element which has these css properties:

.ui-state-focus {
     font-weight: normal;
     margin: -1px;
 }

The reason you're seeing the characters jump is because of the margin: -1px;. If you override that css class with something else you can eliminate the jumping text.

So in order to fix you could do this:

.ui-menu .ui-menu-item a.ui-state-focus {
  margin: 0px;
}

Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles. Here's an updated jsFiddle: https://jsfiddle.net/zcvxy2z6/16/