Fearhunter Fearhunter - 4 months ago 9
AngularJS Question

How can I fix the position of a second colum?

I have two colums with textfield. You can choose the amount of the textfields with the combobox. Here is the first picture

Image 1

When I choose the amount of textfields from the right side then you can this situation.

image2

So far so good but when I choose 0 on the left side the second colums comes to the left side.

image3

When I choose 0 I want that the right colum stay in his place instead of going to the left. How can I do that?

The code:

<div class="form-group">
<label>Invulveld 1:</label>
<input ng-hide="vm.datasource.billLevel < 1 " type="text" ng-model="vm.datasource.text1Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 1" type="text" ng-model="vm.datasource.text1Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 2:</label>
<input ng-hide="vm.datasource.billLevel < 2" type="text" ng-model="vm.datasource.text2Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 2" type="text" ng-model="vm.datasource.text2Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 3:</label>
<input ng-hide="vm.datasource.billLevel < 3" type="text" ng-model="vm.datasource.text3Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 3" type="text" ng-model="vm.datasource.text3Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 4:</label>
<input ng-hide="vm.datasource.billLevel < 4" type="text" ng-model="vm.datasource.text4Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 4" type="text" ng-model="vm.datasource.text4Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 5:</label>
<input ng-hide="vm.datasource.billLevel < 5" type="text" ng-model="vm.datasource.text5Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 5" type="text" ng-model="vm.datasource.text5Contract" style="margin-right:153px; width:156px;" />
</div>

Answer

There are many ways to achieve what you want, It must include either float, fix width.

Here is a solution which includes repeater which is very recommended

Html:

<div class="wrapper" ng-app="myApp" ng-controller="Ctrl">
  <div class="left">
    <select ng-model="vm.selectLeft">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
    </select>
     <div>
      <input ng-repeat="txt in getText('left',vm.selectLeft)  track by $index" ng-value="txt" />
    </div>
  </div>
  <div class="right">
    <select ng-model="vm.selectRight">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
    </select>
    <div>
      <input ng-repeat="txt in getText('right',vm.selectRight)  track by $index" ng-value="txt"/>
    </div>
  </div>
</div>

CSS:

.wrapper{
  width: 400px;
}

.left,
.right{
  float:left;
  width: 40%;
  margin:10px;
}

select, input{
  width:100%;
}
.wrapper input {
  margin-top: 10px;
}

JS:

var app = angular.module('myApp', []);

app.controller('Ctrl', ['$scope', function($scope) {

  $scope.getText = function(txt, length) {
    var newArr = [];
    for (var i = 0; i < length; i++) {
      newArr.push(txt + i);
    }
    return newArr;
  }
}]);

Fiddle example

Comments