I have a problem setting the flex properties of my layout. Here is a plunker:
<md-content flex layout="row" layout-align="center">
<div layout="column">
<div flex layout="column" layout-fill>
<div flex="33">
<md-input-container>
<label>Enter Room's Name</label>
<input ng-model="test" placeholder="Enter Room's Name">
</md-input-container>
</div>
<div flex="66">
<md-button class="md-raised md-accent">
Create Chat Room
</md-button>
</div>
</div>
</div>
</md-content>
Here is the link to documentation:
The issue that the flex property of the input (text) and input (button) are not obeying the flex attribute.
What I am trying to achieve is something like that:
I have a problem setting the flex properties of my layout. Here is a plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview
<md-content flex layout="row" layout-align="center">
<div layout="column">
<div flex layout="column" layout-fill>
<div flex="33">
<md-input-container>
<label>Enter Room's Name</label>
<input ng-model="test" placeholder="Enter Room's Name">
</md-input-container>
</div>
<div flex="66">
<md-button class="md-raised md-accent">
Create Chat Room
</md-button>
</div>
</div>
</div>
</md-content>
Here is the link to documentation: https://material.angularjs/#/layout/grid
The issue that the flex property of the input (text) and input (button) are not obeying the flex attribute.
What I am trying to achieve is something like that:
Share Improve this question edited Apr 13, 2018 at 7:02 vlio20 asked Feb 10, 2015 at 21:30 vlio20vlio20 9,29518 gold badges101 silver badges186 bronze badges1 Answer
Reset to default 11here is the result after I tried it,
hopefully it helps:
<md-content layout="row" layout-align="center">
<div layout="column">
<div flex layout="column" layout-fill> <!-- this is what I change -->
<div flex="33">
<md-input-container>
<label>Enter Room's Name</label>
<input ng-model="test" placeholder="Enter Room's Name">
</md-input-container>
</div>
<div flex="66">
<md-button class="md-raised md-accent">
Create Chat Room
</md-button>
</div>
</div>
</div>
</md-content>