Skip to content

Using EuiCodeBlock with whiteSpace="pre" overlaps content with buttons #3815

@jen-huang

Description

@jen-huang

CodeSandbox: https://codesandbox.io/s/infallible-poincare-j0j2b

The code in the above sandbox is forked directly from the documentation for code block's white space options, except I moved some of the contents into one line. You can see that the contents now overlap the fullscreen and copy buttons:

image

We are able to get around this by wrapping our contents like this, but it's not ideal. Is there a way to make this generic?

      <EuiCodeBlock fontSize="m" isCopyable={true} paddingSize="m">
        <pre style={{ overflow: 'scroll' }}>{windowsCommand}</pre>
      </EuiCodeBlock>

image

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