The "Add a Filter" Dropdown in 7.0 prevents users from seeing fieldnames

[maggieghamry]

Kibana version: 7.0

Elasticsearch version: 7.0

Describe the bug: In the Kibana UI (6.7 and prior), when you go to the Discover pane, and add a filter, the UI dynamically expands to fit the field names. For some reason, in 7.0, the dropdown has been adjusted to a fixed size with no way to expand. This makes it impossible to see the full names for fields with longer names.

Steps to reproduce:

1. Login to Kibana
2. Click "Discover"
3. Click "Add a filter"

Expected behavior:

Allow field name visibility

**Screenshots **

Kibana 7.0:

Kibana 6.7 and prior:

[timroes]

@cchaos do you have any recommendations what we could do here, or any specific EUI tweak we're missing?

[cchaos]

We could possibly increase the width of the popover itself, giving more room for the field select. But currently the EuiComboBox's dropdown will only ever be as wide as its input.

[elasticmachine]

Pinging @elastic/kibana-design

[elasticmachine]

Pinging @elastic/kibana-app

[cjcenizal]

We could possibly increase the width of the popover itself, giving more room for the field select.

We could also place the "Field" combo box on its own row, instead of making it share space with the "Operator" field.

I created elastic/eui#2082 to track the EUI enhancement that would solve this problem at the combo box level.

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[wolph]

Since this still hasn't been resolved, I suggest installing stylus and adding a bit of CSS. I'm currently using these to make everything a bit more usable for large (tested on 4k) monitors:

/* ==UserStyle==
@name           kibana fixes
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Kibana design issues
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://kibana.") {
    .kbnDocViewer__actionButton {
        opacity: 0.2;
    }
    table.table-condensed > tbody > tr {
        border-bottom: 1px solid #eee;
    }
    div.kuiLocalBreadcrumbs,
    div.kbnTopNav__row {
        position: fixed;
        background: #fff;
        top: 0px;
        height: 50px;
        z-index: 1000;
        border-bottom: 1px solid #ccc;
    }
    div.kuiLocalBreadcrumbs {
        left: 40%;
        width: 10%;
    }
    div.kbnTopNav__row {
        left: 50%;
        width: 50%;
    }
    header-global-nav.header-global-wrapper {
        width: 40%;
    }
    .sidebar-container .sidebar-list .sidebar-item-title {
        height: 20px;
    }
    .dscWrapper {
        padding-left: 2px;
    }

    div.euiPopover__panel, div.euiContextMenu {
        width: calc(100vw - 200px) !important;
    }

    div.globalFilterItem__editorForm div.euiFlexGroup {
        max-width: 60%;
    }
    
    div.globalFilterItem__editorForm div.euiFlexGroup > div.euiFlexItem,
    div.globalFilterItem__editorForm div.euiFormRow,
    div.globalFilterItem__editorForm div.euiFormControlLayout,
    div.euiPopover__panel div.euiFlexItem > div,
    div.globalFilterItem__editorForm div.euiComboBox,
    div.euiComboBox__inputWrap{
        max-width: 100% !important;
        width: 100% !important;
    }
    
    div.ReactVirtualized__List,div.ReactVirtualized__Grid__innerScrollContainer, div.euiComboBoxOptionsList__rowWrap{
        width: 800px !important;
        max-width: 800px !important;
    }
    
    div.euiComboBoxOptionsList {
        width: 40% !important;
        max-width: 40% !important;
    }
    
    div.euiForm > div > div:nth-child(3) {
        float: left;
        clear: both;
        top: 60px;
        left: 65%;
        width: 30%;
        position: absolute;
    }
}

[lizozom]

This issue will effect any consumer of TopNav (and not only dashboard and discover).

@elastic/kibana-design any plans to support this option in the drop down component?
I think the level of impact on users here is significant.

[cchaos]

@lizozom Can you create an issue in the EUI repo for what is needed by what component to support this?

[lizozom]

@cchaos sure thing

[cskinfill]

We recently upgraded fomr 6.x to 7.9 and are running in to this problem. Any fix we can apply locally? Or any movement on this issue?

[lizozom]

@cskinfill The issue is tracked under elastic/eui#2082
It's currently labeled as urgent, I encourage you to vote it up and track it there.

[asanfilov]

Version 7.10.2 still has the same UI issue. Please fix it.