AngularJS material layout - issues with flex
22,959
here 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>
Author by
vlio20
Updated on April 13, 2020Comments
-
vlio20 about 4 years
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.org/#/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:
-
eran otzap almost 9 yearswhat does it mean when there is just simply flex and layout-fill attributes with no value ..?
-
nitimalh almost 9 yearsLayout-fill fills the parent div entirely. You needed that to be at 100% to have the children adhere to the settings you gave them. A flex without a value would acquire the remaining space in the div.