Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Fixing The Dropdown / Type-Ahead Menu In Amazon's Kibana / ELK Stack

By Ben Nadel on

At InVision, we currently use Kibana to search our logs. For the most part, Kibana has been pretty good (despite the pains of having many teams dump all of their logs with conflicting keys and data-types). A couple of weeks ago, however, something changed; suddenly, the dropdown / type-ahead menu for the search input started overlapping with the input itself such that you couldn't even see what you were typing:

NOTE: I've colored the dopdown menu gold to showcase the problem more clearly.

Kibana search menu fail.

This has been a huge pain in the butt!

After digging into the HTML and CSS a bit, it appears that while the dropdown menu is positioned absolutely, it's never actually given an explicit location to render. Luckily, Kibana loads jQuery which means that I can easily inject an additional Style tag, giving the dropdown menu its much-needed "top" coordinate:

jQuery( "head" ).append( "<style style='text/css'> .typeahead .typeahead-items { top: 33px ; } </style>" );

Of course, I don't want to have to open the Console of each Kibana browser window and type this in; so, I turned it into a clickable bookmarklet:

javascript:jQuery( "head" ).append( "<style style%3D'text%2Fcss'> .typeahead .typeahead-items %7B top%3A 33px %3B %7D <%2Fstyle>" )%3B;void(0);

Now, I can once again type into the search box unobstructed:

Kibana search menu fail and fix with jQuery bookmarklet.

It's still fairly annoying; but, at least peace is just a quick click away. I suppose I could install a Chrome extension to run this script automatically anytime I hit a Kibana-related URL. But, I try to minimize the number of extensions I have active at any time so that I don't get unexpected extension behavior while I'm working.

Reader Comments


Oh man, I remember Greasemonkey from waaaaaay back in the day. I think that was actually the first every browser extension that I installed (or maybe second to Firebug).

I do have a Chrome extension that can do it; but, I tend to leave most of my extensions disabled since I'm always a little bit paranoid that they can access any / all of my web pages. I'm not sure what kind of security / auditing goes into these extensions.

Any idea what changed to cause this problem? We're just starting to use ELK for ingesting logs ourselves, so I'd be curious to know.


I have no idea :) It changed about a month ago and others on my team confirm it is happening for them as well - so it's not that I have some old broken browser.

Now, I'm not on the "platform" team, so I don't fully understand how this all gets run and hosted. From what I understand, its provided as a service by Amazon and we can't necessarily upgrade to a different version. But again, this really isn't my area of management, so I could be misinforming you :D

Sorry, comments have been temporarily disabled due to spam. I'm busy implementing a new moderation feature because... some people are terrible!