From 5c0122f7fdabe6a5172b57119cac0afcdde1e3dd Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Thu, 11 Mar 2021 17:06:04 +0200 Subject: [PATCH] fix(docs-infra): fix the layout of docs pages in IE11 (#41183) IE11 does not recognize the `
` element as a block element and therefore it does not apply margin/paddings/widths as expected. This resulted in the layout of docs pages being broken in IE11 (see the image below). This commit fixes the layout by explicitly setting `.sidenav-content` (which is a `
` element) to `display: block`. Before: ![docs pages layout in IE11 before][1] After: ![docs pages layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png [2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png PR Close #41183 --- aio/src/styles/1-layouts/_content-layout.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss index 2c03a4b1be..63dc42416e 100644 --- a/aio/src/styles/1-layouts/_content-layout.scss +++ b/aio/src/styles/1-layouts/_content-layout.scss @@ -4,6 +4,8 @@ } .sidenav-content { + display: block; // This is required for browsers that do not recognize `
` as a block + // element (such as IE11). min-height: 100vh; padding: 80px 3rem 2rem; max-width: 50em;