Layout overlapping for media breakpoints

aprotsyk commented 8 years ago

Actual Behavior:

What is the issue? if we have different layouts for media breakpoints layout element are overlapping
What is the expected behavior? all element for example should be align in column

CodePen (or steps to reproduce the issue): *

CodePen Demo which shows your issue: http://codepen.io/aprotsyk/pen/ORxBxJ
Details: to reproduce bug, resize window to flex-xs breakpoint

Angular Versions: *

Angular Version:1.5.8
Angular Material Version: 1.1.1

Additional Information:

Browser Type: Chrome, Safari
Browser Version: *
OS: macOS
Stack Traces:

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

ThomasBurleson commented 8 years ago

I do not understand the issue you are reporting. Please provide more details and screen captures of the issue(s).

aprotsyk commented 8 years ago

I defined simple layout

<body layout="column" ng-app="myApp" ng-cloak>
    <div layout="row" layout-xs='column' >
        <md-input-container flex="50" flex-xs='100'>
            <label>Input 1</label>
            <input/>
        </md-input-container>
        <md-input-container flex='50' flex-xs='100'>
            <label>Input 2</label>
            <input/>
        </md-input-container>
     </div> 
    <md-input-container flex='100'>
      <label>Input 3</label>
      <input/>
    </md-input-container>
</body>

for window size great than XS layout displayed correct, we have first row with 2 inputs (input1 and input2) and second row with input3 layout with flex beakpoint great than xs

but for window size less than XS, first row overlapping with input 3. expected than all inputs will be displayed in one column layout with flex breakpoint less then xs

angular / material

Layout overlapping for media breakpoints #9739