Text input box not accepting input in modal from Angular UI Bootstrap

Question

I have a modal (nbr 1) that I open from another modal (nbr 2). The modal nbr 1 works fine and is showing the things it should. But I tried to put an input to filter items in the modal, but the input is not working. I can't write anything in it, it's just not accepting my input.

I think this has something to do with the fact that it's is my second modal, since when I'm opening it from the "root" (not opening it from another modal), the text inputs works fine.

Here's my html:

<div class="modal-header">
  <h3 class="modal-title">Pick a student</h3>
<div class="modal-body">

  <!-- I can't type in this text field, no matter where it's placed och if it has any attributes at all -->
  <input type="text" class="form-control" id="searchUsers" placeholder="Search by name, personal ID number or group" ng-model="search.$" ng-click="console.log('omg')">
  <table class="table table-hover table-striped equi-table">
    <tbody>
      <tr ng-repeat="user in state.users | filter:search:strict">
        <td>{{ user.firstName }}</td>
        <td>{{ user.lastName }}</td>
        <td>{{ user.personalIDNumber }}</td>
      </tr>
    </tbody>
  </table>
</div>

And here's the JavaScript:

This part opens the modal from modal nbr 2:

$scope.addUserToCourse = function () {
  utilities.pickAUserModal();
};

And here's the actual modal

angular.module('equiclass.services')
.factory('utilities', function ($modal) {
  var pickAUserModal = function () {
    var modalInstance = $modal.open({
      templateUrl: '/views/modals/pick-a-user-modal.html',
      controller: function ($scope, $modalInstance, stateService, userService) {
        var log = loggingService.getLogger ('pickAUserModal');

        $scope.state = userService.state;
        userService.initializeUsers().then(function () {
          $scope.hasInitialized = true;
        });

        $scope.ok = function () {
          $modalInstance.close(true);
        };

        $scope.cancel = function () {
          $modalInstance.close(false);
        };
      }
    });
  };

  return {
    pickAUserModal: pickAUserModal
  };
});

Why can't I type anything in my text input? I've tried editing z-indexes, and putting different kinds of inputs there (checkboxes work, textareas doesn't). And as I said before, the modal is opened from another modal, but modal number two is not created using Angular UI Bootstrap (I'm slowly phasing over to angular UI)

Answer 1

I had the same problem with angular-strap modal and I could not manage to write into any input field. After few hours I have found what's wrong and how to fix it. The problem comes with bootstrap-additions.min.css and class .modal.center .modal-dialog which position property is fixed. I do not know why but that breaks all input fields into my modal. When you use absolute positon for that property the modal block works jsut fine.

.modal.center .modal-dialog{
    position:absolute !important;
    top:40%;left:50%;
    min-width:320px;
    max-width:630px;
    width:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
} 

I hope that can help you to with your problem.