jcubic jcubic - 3 months ago 9
Javascript Question

The height of layout="row" don't change when I'm adding new items in angular material

I have html like this:

<body layout="row" ng-app="myApp" ng-cloak="ng-cloak" ng-controller="main">
<md-content flex="100" layout="row" class="management-panelmd-background md-hue-1">
<md-card class="md-whiteframe-4dp detail">
<div layout="row" layout-align="begin begin" ng-repeat="item in vm.managementPanelsFields" style="margin-bottom: 30px;" class="row flex">
<div flex="40" ng-show="item.isVisible">{{item.name}}</div>
<div flex="60" ng-show="item.isVisible" class="spacing">
<div ng-if="item.IsMultipleValue" class="multiple">
<ul>
<li ng-repeat="e in item.value track by $index" layout="row" layout-align="begin end">
<div ng-if="item.fieldType == 'Int'" flex="45">
<md-input-container>
<label>{{item.watermarkText}}</label>
<input type="number" name="{{item.id}}-{{$index}}" ng-pattern="item.regexValidation" ng-required="item.isRequired" ng-model="item.value[$index]"/>
</md-input-container>
</div>
<div ng-if="item.complementary" flex="45">
<div ng-if="item.complementary.fieldType == 'Dropdown'">
<md-select ng-model="item.complementary.value[$index]">
<md-option ng-repeat="(key, value) in item.complementary.options" value="{{key}}">{{value}}</md-option>
</md-select>
</div>
</div>
<div flex="10" class="delete"><a ng-click="deleteValue(item, $index)">X</a></div>
</li>
</ul>
<md-button ng-click="newValue(item)" class="md-raised md-primary">ADD</md-button>
</div>
<div ng-if="!item.IsMultipleValue" layout="row">
<div ng-if="item.fieldType == 'TextArea'" flex="100" ng-class="{error: form[item.id].$error}">
<textarea name="{{item.id}}" ng-trim="false" ng-required="item.isRequired" ng-pattern="item.regexValidation" placeholder="{{item.watermarkText}}" ng-model="item.value"></textarea>
</div>
</div>
</div>
</div>
</md-card>
</md-content>
</body>


and when I'm, creating dynamic inputs using add button the button is above the textarea that is next to the inputs, and the height of the div that have
ng-repeat="item in vm.managementPanelsFields"
don't change even that the content have bigger height.

Here is code pen

Answer

The height doesn't change because you are using flex. Each row is being set to flex: 1 which means that the height ratio between the rows will be 1:1 = same height.

Your container has flex: 1 1 100%: this defines that the total height of the content will be 100% of the screen height, thus, each row will take 50% of the screen. I can only infer from your question that this is not what you want.

You can remove the layout="row"

md-content.management-panelmd-background.md-hue-1(flex="100")

and this will solve the dynamic height problem. You didn't say what is your requested layout, so I suggested my own.