New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preventing index size/time input to hide rotation strategy dropdown. #4826

Merged
merged 2 commits into from Jun 27, 2018

Conversation

Projects
None yet
3 participants
@dennisoelkers
Member

dennisoelkers commented Jun 8, 2018

Description

Motivation and Context

Before this change, other elements (namely react-bootstrap input
components with addons) overlapped with Select inputs due to a higher
z-index of the first.

This change is increasing the z-index of the Select/react-select
menu to 3 (react-bootstrap input addons are on 2) to prevent this.

Fixes #4769.

Should be backported to 2.4.

How Has This Been Tested?

Screenshots (if appropriate):

Before:
screen shot 2018-06-08 at 10 22 14
screen shot 2018-06-08 at 10 22 25

After:
screen shot 2018-06-08 at 10 22 57
screen shot 2018-06-08 at 10 23 05

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@dennisoelkers dennisoelkers added this to the 3.0.0 milestone Jun 8, 2018

@bernd

This comment has been minimized.

Member

bernd commented Jun 8, 2018

@dennisoelkers I am pretty sure that this worked at some point. No idea why it broke.

This looks like a fix for the index settings only. Is there a way to fix this in a more generic way? I guess this will happen in other places as well.

@dennisoelkers

This comment has been minimized.

Member

dennisoelkers commented Jun 11, 2018

Is there a way to fix this in a more generic way?

Maybe, maybe not. This happens only when two things are combined:

a) a react-select input
b) a react-bootstrap input with an addon below a)

To "fix" it in a general way, we would have to normalize the z-index of b) to 0 globally. I would not do that right now, because we have only a single form where it broke, and I am sure it has been set to 2 in react-bootstrap for a reason.

@edmundoa

This comment has been minimized.

Member

edmundoa commented Jun 12, 2018

I was looking into a similar issue that @bernd found in #4828, and investigating a bit I found the culprit of this behaviour, which is a change in react-select: JedWatson/react-select@b0bc3e3#diff-895b3c670e6ebd76e91dbce59ff14fdb

I think using a low z-index value by default in the library makes sense, so I think the best way we can solve this issue is increasing the react-select's z-index in our component, as they suggest there. In that way we can set a higher value than the one used by react-bootstrap or ace editor, ensuring the option list will appear above other inputs.

Increasing z-index of `Select` component to overlay other elements.
Before this change, other elements (namely react-bootstrap input
components with addons) overlapped with `Select` inputs due to a higher
`z-index` of the first.

This change is increasing the `z-index` of the `Select`/`react-select`
menu to `3` (react-bootstrap input addons are on `2`) to prevent this.

Fixes #4769.

@dennisoelkers dennisoelkers force-pushed the issue-4769 branch from 1c09907 to 06beb2c Jun 12, 2018

@dennisoelkers

This comment has been minimized.

Member

dennisoelkers commented Jun 12, 2018

I reimplemented it by increasing the z-index for the react-select/Select menu.

@edmundoa edmundoa self-requested a review Jun 12, 2018

:local(.increaseZIndex) .Select-menu-outer {
z-index: 3;

This comment has been minimized.

@edmundoa

edmundoa Jun 12, 2018

Member

This is unfortunately not good enough to make the options appear on top of the ace gutter, which has a z-index of 4. Could you increase the value a bit more, please? In the end I don't think increasing it is a problem, since opening the select options should be displayed on top of other elements in all cases I can think of.

This comment has been minimized.

@dennisoelkers

dennisoelkers Jun 25, 2018

Member

Hm, I tested that in the extended search UI which uses a Select component next to an Ace input as well and 3 was enough for that. Where do you encounter the problem in the UI, so I can verify the problem/the fix?

This comment has been minimized.

@dennisoelkers

dennisoelkers Jun 25, 2018

Member

Ah, that one does not use the gutter, which explains why it works there. :)

Increase z index of `Select` component's menu to 5.
This change is increasing the z-index of the dropdown menu of a `Select`
component even more, so it is on top of the gutter of an Ace editor
component.

@edmundoa edmundoa merged commit 3981686 into master Jun 27, 2018

4 of 5 checks passed

ci-web-linter Jenkins build graylog-pr-linter-check 2558 has failed
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
graylog-project/pr Jenkins build graylog-project-pr-snapshot 1479 has succeeded
Details
license/cla Contributor License Agreement is signed.
Details

@edmundoa edmundoa deleted the issue-4769 branch Jun 27, 2018

bernd added a commit that referenced this pull request Jun 28, 2018

Preventing index size/time input to hide rotation strategy dropdown. (#…
…4826)

* Increasing z-index of `Select` component to overlay other elements.

Before this change, other elements (namely react-bootstrap input
components with addons) overlapped with `Select` inputs due to a higher
`z-index` of the first.

This change is increasing the `z-index` of the `Select`/`react-select`
menu to `3` (react-bootstrap input addons are on `2`) to prevent this.

Fixes #4769.

* Increase z index of `Select` component's menu to 5.

This change is increasing the z-index of the dropdown menu of a `Select`
component even more, so it is on top of the gutter of an Ace editor
component.

(cherry picked from commit 3981686)

edmundoa added a commit that referenced this pull request Jun 28, 2018

Preventing index size/time input to hide rotation strategy dropdown. (#…
…4826) (#4880)

* Increasing z-index of `Select` component to overlay other elements.

Before this change, other elements (namely react-bootstrap input
components with addons) overlapped with `Select` inputs due to a higher
`z-index` of the first.

This change is increasing the `z-index` of the `Select`/`react-select`
menu to `3` (react-bootstrap input addons are on `2`) to prevent this.

Fixes #4769.

* Increase z index of `Select` component's menu to 5.

This change is increasing the z-index of the dropdown menu of a `Select`
component even more, so it is on top of the gutter of an Ace editor
component.

(cherry picked from commit 3981686)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment