I am currently working on adding a "choose file button and remove button" alongside another add button within a bootstrap panel body. While the add button is functioning correctly, I am encountering alignment issues with the newly added row.
Here is the current layout using Bootstrap:
The problem lies in the body alignment of the panel:
Any suggestions on how to rectify this issue?
Please see below for the code snippet I am working with.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/uploadAttachementFiles.controller.js"></script>
<script src="js/uploadAttachementComponent.js"></script>
<link rel="stylesheet" href="css/uploadAttachementfiles.css">
</head>
<body ng-app="App" ng-controller="UploadController as vm">
<div class="container">
<div class="row">
<div class="form-group row">
<label for="desc" class="col-xs-3 col-md-3 col-form-label">Description:</label>
<div class="col-xs-8 col-md-5">
<textarea class="col-xs-8 col-md-9" rows="3" cols="5" maxlength="255" id="desc" style="resize: none;"></textarea>
</div>
</div>
<div class="container">
<div class="form-group row ">
<label for="uplodedFiles" class="col-xs-3 col-md-3 col-form-label">Uploded Files:*</label>
<div class="panel panel-default col-xs-9 col-md-8">
<div class="panel-heading">Location</div>
<div class="panel-body ">
<div ng-repeat="file in vm.files">
<button type="button" class="btn col-xs-1 col-form-label" ng-hide="myValue" ng-click="Remove($index)">
<span class="glyphicon glyphicon-remove-sign"></span>
</button>
<input type="file" value="{{vm.Name}}" id="fg" />
</div>
</div>
<div class="form-group ">
<span class="glyphicon glyphicon-plus-sign" ng-click="Add()"></span>
<input type="button" ng-click="Add()" value="Add" ng-model="Name">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
var App = angular.module('App', []);
App.controller('UploadController', ['$scope', function($scope, $window) {
var file = {};
$scope.vm.files = [file
];
$scope.Add = function() {
//Add new item to Array
var file = {};
file.Name = $scope.Name;
$scope.vm.files.push(file);
//Clear Text boxes
$scope.Name = "";
console.log(file);
};
$scope.Remove = function(index) {
//Find the record From Array Using index
{
//Remove Item from Array using index
$scope.vm.files.splice(index, 1);
console.log(index, 1);
}
}
}]);
</script>
</body>
</html>