Skip to content

[Console] Fix Safari layout issue#47100

Merged
jloleysens merged 3 commits intoelastic:masterfrom
jloleysens:console-flex-fix
Oct 2, 2019
Merged

[Console] Fix Safari layout issue#47100
jloleysens merged 3 commits intoelastic:masterfrom
jloleysens:console-flex-fix

Conversation

@jloleysens
Copy link
Contributor

@jloleysens jloleysens commented Oct 2, 2019

Summary

Fixes this Safari issue: #47076

The general strategy is to move away from using heigh: 100% and instead use display flex for controlling height of the console app's root element. Because the root element is rendered through angular the styles applied to a flex group element have been copied to that class.

Checklist

@jloleysens jloleysens added Feature:Console Dev Tools Console Feature release_note:fix Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v7.5.0 v7.4.1 labels Oct 2, 2019
@elasticmachine
Copy link
Contributor

Pinging @elastic/es-ui (Team:Elasticsearch UI)

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Contributor

@alisonelizabeth alisonelizabeth left a comment

Choose a reason for hiding this comment

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

@jloleysens tested locally on chrome and safari and fix looks good! I left a couple questions about the scss.


return (
<div className="consoleContainer" style={{ height: '100%', width: '100%' }} ref={containerRef}>
<>
Copy link
Contributor

Choose a reason for hiding this comment

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

I wasn't aware of this shorter syntax for fragments 👍

@jloleysens
Copy link
Contributor Author

jloleysens commented Oct 2, 2019

@alisonelizabeth @snide

Thanks for the review! I wasn't aware of the auto-prefixer in Kibana. I removed the vendor prefixes.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@jloleysens jloleysens merged commit d243697 into elastic:master Oct 2, 2019
@jloleysens jloleysens deleted the console-flex-fix branch October 3, 2019 07:14
jloleysens added a commit to jloleysens/kibana that referenced this pull request Oct 3, 2019
* Remove 100% height, migrate console root to display flex

* Remove unused import

* Removed vendor prefixes in CSS
jloleysens added a commit that referenced this pull request Oct 3, 2019
* Remove 100% height, migrate console root to display flex

* Remove unused import

* Removed vendor prefixes in CSS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Console Dev Tools Console Feature release_note:fix Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v7.5.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants