0
У меня есть модальное окно, но когда нажата кнопка, которая активирует его, модальный, который появляется, разрезается пополам, like this. В маленьком окне модаль выглядит просто отлично. Извините за код, это своего рода беспорядок.Bootstrap modal cut in half
<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>OAMK Opinnäytetyöt</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>OAMK Opinnäytetyöt</h1>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg text-center" data-toggle="modal" data-target="#myModal">Lisää uusi aihe</button>
<!-- TODO LIST -->
<div id="todo-list" class="row">
<div class="col-sm-10>
<!-- LOOP OVER THE TODOS IN $scope.todos -->
<div class="checkbox" ng-repeat="todo in todos">
<label>
<h1>
<input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.aihe }}
</h1>
</label>
<br>
{{ todo.kuvaus }}
</div>
</div>
</div>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><!-- FORM TO CREATE TODOS -->
<div id="todo-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
<input type="text" maxlength="50" class="form-control input-lg" placeholder="Aihe (max. 50 merkkiä)" ng-model="formData.aihe">
<input type="text" maxlength="255"class="form-control input-lg" placeholder="Kuvaus (max. 255 merkkiä)" ng-model="formData.kuvaus">
</div>
<!-- createToDo() WILL CREATE NEW TODOS -->
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal" ng-click="createTodo()">Lisää</button>
</form>
</div>
</div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Можно ли ваш CSS на '# myModal' является затрагивая его? –
Без CSS модальность по-прежнему уменьшается вдвое, это просто в другом месте: i.stack.imgur.com/srpAf.png – akuj
Что касается вашего обновления, с помощью этого точного кода, он отлично работает ... Не так ли? Я не могу воспроизвести ваши ошибки ... http://imgur.com/CD9yQw7 Это в Chrome - Максимизировано. Он также отлично работает в I Explorer – chrisv