Skip to content

Change flex-basis for EuiPageBody#1497

Merged
ryankeairns merged 2 commits intoelastic:masterfrom
ryankeairns:rk/page-body-ie11
Jan 30, 2019
Merged

Change flex-basis for EuiPageBody#1497
ryankeairns merged 2 commits intoelastic:masterfrom
ryankeairns:rk/page-body-ie11

Conversation

@ryankeairns
Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns commented Jan 30, 2019

Summary

@sebelga reported an IE11 layout issue within Management (screenshot below) where the layout would break for larger screen sizes. After digging in, the cause was related to the EuiPageBody having a flex-basis: 0% value. Changing this value to 100% makes the page body center itself properly in IE11 while continuing to work in other browsers as well.

This change was tested in Kibana, Cloud, and EUI docs on IE11, Edge, Firefox, Safari and Chrome.

Notes: This issue was only observed on the Management views where there is a second side navigation and where there are kui column layouts (div containers) being used for sections within EuiPage. In this situation, IE11 displays the content in the center of section, however it does so from the left edge of the content when the flex-basis is 0%.

screenshot 2019-01-30 09 36 11

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking the time to test it in all those environments!

Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ryankeairns ryankeairns merged commit b09791e into elastic:master Jan 30, 2019
@sebelga
Copy link
Copy Markdown
Contributor

sebelga commented Jan 31, 2019

Great, thanks for the fix @ryankeairns !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants