Skip to main content
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Steve 'Cutter' Blades
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Steve 'Cutter' Blades ( @cutterbl )

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

By 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.

Want to use code from this post? Check out the license.

Reader Comments

15,665 Comments

@Kristopher,

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.

15 Comments

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.

15,665 Comments

@Sam,

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

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel