Customizable key width on EuiKeyPadMenu

[sksamuel]

As the title says, would be great to allow 4/5 or more columns in the EuiKeyPadMenu

[cchaos]

Hi @sksamuel 👋 . The number of columns is purely based on the width CSS property applied to the wrapper. You can easily override this using one of the following techniques.

1. Pass a custom className and apply your own CSS width property
2. Pass an inline style block with your own value such as style={{ width: 400 }}
3. If you're using Emotion for styles (EUI is transitioning to this), pass a custom css value such as

css={css`width: 400px;`}

[elizabetdev]

When we start converting the EuiKeyPadMenu component to Emotion (https://github.com/elastic/eui/issues/5685) we can consider adding a prop to make it easier for consumers to add more columns. Maybe a width prop on the wrapper component <EuiKeyPadMenu width={400} />?

Also if we add this ability to change the width we should add some guidelines on what max number of times per row is considered a good design practice.

[sksamuel]

@cchaos thanks that works :)

[github-actions[bot]]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.