[Logs UI] Fix index checkbox overlap of the analysis setup dat… (#49489)

This slightly increases the datepicker popover `z-index` to avoid the checkbox labels (which for some reason have an increased `z-index`) from underneath showing through.

fixes #49245
This commit is contained in:
Felix Stürmer 2019-10-29 18:05:40 +01:00 committed by GitHub
parent 94202a9eab
commit 215ac207fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -4,18 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useMemo } from 'react';
import moment, { Moment } from 'moment';
import { i18n } from '@kbn/i18n';
import {
EuiDescribedFormGroup,
EuiFormRow,
EuiDatePicker,
EuiDatePickerProps,
EuiDescribedFormGroup,
EuiFlexGroup,
EuiFormControlLayout,
EuiFormRow,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React, { useMemo } from 'react';
import { euiStyled } from '../../../../../../../../common/eui_styled_components';
const startTimeLabel = i18n.translate('xpack.infra.analysisSetup.startTimeLabel', {
defaultMessage: 'Start time',
@ -84,7 +86,7 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
<EuiFormControlLayout
clear={startTime ? { onClick: () => setStartTime(undefined) } : undefined}
>
<EuiDatePicker
<FixedDatePicker
showTimeSelect
selected={startTimeValue}
onChange={date => setStartTime(selectedDateToParam(date))}
@ -105,7 +107,7 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
<EuiFormControlLayout
clear={endTime ? { onClick: () => setEndTime(undefined) } : undefined}
>
<EuiDatePicker
<FixedDatePicker
showTimeSelect
selected={endTimeValue}
onChange={date => setEndTime(selectedDateToParam(date))}
@ -129,3 +131,18 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
</EuiDescribedFormGroup>
);
};
const FixedDatePicker = euiStyled(
({
className,
inputClassName,
...datePickerProps
}: {
className?: string;
inputClassName?: string;
} & EuiDatePickerProps) => (
<EuiDatePicker {...datePickerProps} className={inputClassName} popperClassName={className} />
)
)`
z-index: 3 !important;
`;