Timepicker overlapped by scroll bar on IE and Edge

[marius-dr]

Kibana version: 4.6.4

Elasticsearch version: 2.4.3

Server OS version: Windows 10 TH2

Browser version: IE 11 & MS Edge 25.10586.672.0

Browser OS version: Windows 10

Original install method (e.g. download page, yum, from source, etc.): snapshot builds

Description of the problem including expected versus actual behavior:
IE and Edge scroll bars overlap text in the Time Picker and on the discover field.

Steps to reproduce:

1. Open a time-based index patter in the Discover page.
2. Parts of the "hits" label and the time-picker are under the scroll bar when you start scrolling

Some extra left-padding for these should be added when detecting IE or Edge as the browser. It works fine on any other browser tested (Firefox and Chrome) as they treat the scroll bar differently (and better).

The issue is present in previous builds of Kibana (tested in 4.6.3) and in newer versions (tested in 5.1.1)

4.6.4 screenshot:

5.1.1 screenshot:

[tbragin]

@cjcenizal Have you seen this as a problem? It might be a wider scope than just Discover page.

[cjcenizal]

@tbragin Thanks for pinging me on this. I haven't noticed this but I also haven't thoroughly tested Kibana on these platforms. Based on the description of the issue, I think it's possibly a global problem based on how the browsers render scroll bars (http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that). I'll look into it; thanks.

[marius-dr]

@cjcenizal Any ideas on this? Right now this triggers a fail in the integration tests on Internet Explorer due to the scroll bar overlapping the UP arrow that is used to closed the Timepicker. If it's not a trivial fix, I'll try using an alternative way to close the TImepicker in the tests.
LE: I did find something similar around: http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that
Maybe it helps us as well.