Search "Reset" button has disappeared, unless hovered over-

I think I used some other code to do something, because I have now hidden the “Reset” button which lives next to the Search button on Keyword Search boxes. It only shows up if you hover your cursor over it. Anybody have any idea what code I can search for in my CSS or JS to figure this out??

Example pics below:

Try looking for CSS references.

.kn-keyword-reset,
.kn-search-reset {
  display: none;
  opacity: 0;
  visibility: hidden;
}

Also, check if there’s any JS that modifies button visibility on hover or input focus. Look for code with mouseenter, mouseleave, or .hover() events, or anything that uses .css(‘display’, ‘none’).

Great suggestions as always Carl! However, I’ve search my JS and CSS for all of those keywords and nothing comes up, i even did as simple as “search” and “reset”…

My “overkill” next step would be to remove all the CSS. See if the the button comes back and add the code in again in sections.

This may not work if you have thousands of lines of code. :man_technologist:

In my defence, I’m not a coder, so there may be something else hiding it :thinking:

Asking ChatGPT it suggests:

Inspect with Developer Tools

  • Open the live app in Chrome
  • Right-click the area next to the keyword search.
  • Click “Inspect”.
  • Find the reset button element in the Elements tab.
  • In the “Styles” pane, see what rules are hiding it and which file or line they come from.

Check for Hover/Fade Logic in JS

If it only appears on hover, there might be jQuery/JS controlling it.


.hover(
mouseenter
mouseleave
.css('opacity'
.css('display'
.fadeIn(
.fadeOut(
.toggle(

Great ideas again @CarlHolmes ! I removed ALL CSS and it fixed the issue. I’ll start working chunk by chunk. Only 244 lines of CSS! Much better than combing through my 7000 lines of js… Thanks!


I think i’ve got it narrowed down to here…

Great - let me know how it goes. :wink:

OK, finally fixed it by adding !important to the “Background” line…