I've been working on displaying a modal template when a row is selected on a table.
The issue I'm facing is that upon clicking a row, a 2px thick black shadowed line appears, which seems to represent the modal but doesn't display its content entirely.
Any thoughts on what might be causing this?
HTML Index Code:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<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="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div ng-app="myTable" ng-controller="tableCtrl">
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
<tr ng-repeat="person in people" ng-click="changeRowData(person)">
<td>
{{person.FirstName}}
</td>
<td>
{{person.LastName}}
</td>
<td>
{{person.Age}}
</td>
<td>
{{person.Nickname}}
</td>
</tr>
</table>
</div>
<div class="centered">
<button type="button" class="btn btn-primary" data-ng-click="addEntry()">Add New Entry</button>
</div>
<div id="searchFirstName">
<div class="panel panel-primary">
<div class="panel-heading">Change Table Background Colour: </div>
<div class="panel-body">
<div id"buttonAndColours">
<button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
<div class="colours" style="background-color:red;"></div>
<div class="colours" style="background-color:yellow;"></div>
<div class="colours" style="background-color:lightBlue;"></div>
<div class="colours" style="background-color:green;"></div>
<div class="colours" style="background-color:white;"></div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Search For First Name in Table:</div>
<div class="panel-body">
<p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
<br/>
<table class="table table-condensed">
<tr>
<th>First Names to be Searched For:</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ person.FirstName }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Modal Template Code:
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
Javascript File Code:
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxxxxx.json").success(function(response){
$scope.people = response.People;
});
$scope.changeRowData = function(changeableData) {
var modalTemplateInstance = $uibModal.open({
templateUrl: 'modalTemplate.html',
controller: function($scope) {
}
});
}
});