Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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)

share|improve this question
    
Did you checked in developer tools that input is really disabled? or maybe it's onder overlay from the first modal? –  maurycy Aug 5 at 8:57
    
I don't think it's overlayed, since all the other buttons and so on works. I have read the documentation and can find nothing there! –  stinaq Aug 5 at 9:05
1  
Can you make a working example on jsfiddle or plnkr? –  maurycy Aug 5 at 9:07

1 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.

share|improve this answer
    
This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. –  ebram tharwat Sep 25 at 10:41
    
I will try this and see if it helps –  stinaq Sep 28 at 14:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.