Skip to content

EuiSuperDatePicker leaves unnecessary margin on right side when used in FlexGroup #2225

@shahzad31

Description

@shahzad31

In UpTime we are using EuiSuperDatePicker in header bar, when used like this

                    <EuiFlexGroup
                      alignItems="center"
                      justifyContent="spaceBetween"
                      gutterSize="s"
                    >
                      <EuiFlexItem grow={false}>
                        <EuiTitle>
                          <h1>{headingText}</h1>
                        </EuiTitle>
                      </EuiFlexItem>
                      <EuiFlexItem grow={false}>
                        <UptimeDatePicker refreshApp={refreshApp} {...rootRouteProps} />
                      </EuiFlexItem>
                    </EuiFlexGroup>

EuiSuperDatePicker itself is a flex group with guttersize "s" so it leaves margin at end as shown below
image

I think this can be resolved by providing option to override the guttersize in component or by customizing it's css.

This issue was discovered in UpTime app #40585

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions