Text input box not accepting input in modal from Angular UI Bootstrap
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)
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.
I had the same issue as well with the following code:
element.on('mousedown', function (event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
I fixed it by removing event.preventDefault(); , changing the code to:
element.on('mousedown', function (event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
This allows the clicks to reach the fields.
I know that this is late, but I ran into the same error today. What fixed it for me was deleting the custom bootstrap CSS that angular strap provides. I wasn't using this until I added date-picker and it wasn't styling correctly.
I just used the date-picker CSS and that fixed the problem. I'm guessing it has something to do with the modal styles in the custom CSS.
Hope this helps someone.
链接地址: http://www.djcxy.com/p/22110.html上一篇: 发现缓存SSL页面，捆绑和缩小