Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(layout): fix IE11 layout
Browse files Browse the repository at this point in the history
Closes #1227
  • Loading branch information
Marcy Sutton committed Jan 19, 2015
1 parent 581baba commit 74fe3eb
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 8 deletions.
23 changes: 16 additions & 7 deletions docs/app/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -211,21 +211,30 @@ md-tabs.demo-source-tabs .active md-tab-label {
.small-demo .demo-content {
min-height: 128px;
}

.doc-content > * {
-webkit-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.demo-content > * {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1 1 0%;
-webkit-flex: 1 1 0%;
-moz-box-flex: 1 1 0%;
-moz-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
}

.demo-content > div[layout-fill] {
min-height: 448px;
}
.small-demo .demo-content > div[layout-fill] {
min-height: 224px;
}
.layout-content .small-demo .demo-content > div[layout],
.layout-options .small-demo .demo-content > div[layout] {
min-height: auto !important;
max-height: auto !important;
Expand Down
2 changes: 2 additions & 0 deletions src/components/icon/icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ md-icon {
background-repeat: no-repeat no-repeat;
pointer-events: none;
display: flex;
z-index: 0;

object.md-icon {
display: inline-block;
}
Expand Down
2 changes: 1 addition & 1 deletion src/core/style/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
}

[#{$flexName}] {
flex: 1;
flex: 1 1 0%;

This comment has been minimized.

Copy link
@gkalpak

gkalpak Jan 21, 2015

Member

Why 0% here ?

This comment has been minimized.

Copy link
@ThomasBurleson

ThomasBurleson Jan 21, 2015

Contributor

Uses the 3-value syntax @see Guide to Flexbox:

flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */

Is this what we want?

This comment has been minimized.

Copy link
@gkalpak

gkalpak Jan 21, 2015

Member

My question is why 0% (in constrast to something else).
If I recall correctly, other IE issues where solved by replacing flex: 1 with flex: 0 0 100%.

}


Expand Down

4 comments on commit 74fe3eb

@PaulMougel
Copy link
Contributor

Choose a reason for hiding this comment

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

Just wanted to note that this commit messed up with a lot of my layouts that have layout="row" layout-sm="column" flex. In mobile, the various elements stack on top of each other:
image
The fix was simply to replace flex by flex-gt-sm.

@ThomasBurleson
Copy link
Contributor

Choose a reason for hiding this comment

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

@marcysutton - Is that change to layout.scss valid ? This is a global change that affects everything.

@marcysutton
Copy link
Contributor

Choose a reason for hiding this comment

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

It was something I should have vetted more carefully from a community PR, let's remove it!

@marcysutton
Copy link
Contributor

Choose a reason for hiding this comment

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

Reverted in a61cd19

Please sign in to comment.