Button alignment relative to button inside of another controller

Question

I have two buttons inside separate controllers.

<div ng-controller="aCtrl">
  <button class="addButton" ng-click="toggle()"> Add </button>
  <form ng-hide="myVar" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

<div ng-controller="bCtrl">
  <button class="EditButton" ng-click="toggle()"> Add </button>
  <form ng-hide="myVar" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

Note: Toggle just switches the hide/show bool in the back-end

As you can see when clicking the Addbutton it will show the form for aCtrl and EditButton for bCtrl. The result of the current layout is when Add Buttons form expands it pushes the EditButton down. I don't think this can be fixed with CSS as its the logical flow of the HTML.

I am looking for solutions that would allow me to have the buttons at the top in the flow of the page then the forms below.

for example I tried:

  <button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button>
  <button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button>

<div ng-controller="aCtrl">
  <form ng-hide="myVar" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

<div ng-controller="bCtrl">
  <form ng-hide="myVar" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

Which doesn't seem to work.

Answer 1

The problem is that ng-hide hides the content with a display: none that causes the space occupied by the element to collapse.
You need visibility: hidden that also hides the element, but keeps the space.

Therefore, use ng-class instead of ng-hide:

<div ng-controller="aCtrl">
  <button class="addButton" ng-click="toggle()"> Add </button>
  <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

<div ng-controller="bCtrl">
  <button class="EditButton" ng-click="toggle()"> Add </button>
  <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
    <input ......
    <input ......
  </form>
</div>

and the CSS

.hidden {
    visibility: hidden;
}

Here is a live sample:

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

function aCtrl($scope) {
    $scope.myVar = true;
    $scope.toggle = function () {
      $scope.myVar = !$scope.myVar;
    }
}

function bCtrl($scope) {
    $scope.myVar = true;
    $scope.toggle = function () {
      $scope.myVar = !$scope.myVar;
    }
}

.hidden {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="myApp">
  <div ng-controller="aCtrl">
    <button class="addButton" ng-click="toggle()"> aCtrl.Add </button>
    <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
      <input type="text" value="aCtrl.form">
    </form>
  </div>

  <div ng-controller="bCtrl">
    <button class="EditButton" ng-click="toggle()"> bCtrl.Add </button>
    <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
      <input type="text" value="bCtrl.form">
    </form>
  </div>
</section>

As you can see, the bCtrl.Add button remains in place, regardless whether aCtrl.form is visible or not.