We Keep Coding

content overlapping in Ipad landscape view

my content is working fine in desktop and other small devices but in iPad landscape view ( screen size 1024pX768) I'm facing issue, when I clicked on the menu sidebar toggle it's overlapping on the existing content. we're using bootstap 3
I don't want overlap the div content its there in the area when menu toggle clicked.
In the first image, it looks fine when clicked on the toggle menu button it will be overlapped.
My HTML code is:
<div class="row">
<div class="box-hseader">
<div class="col-md-6 col-sm-6">
<div class="col-md-3" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="totalComplaints()">
<div class="col-mds-3">
<span>Total: {{commonareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat" ng-click="isSolved()">
<div class="col-mds-3">
<span>Solved: {{commonareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{commonareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{commoncanceled||0}}</span>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="form-group form-inline pull-right rghtFlt">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All">All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
data-whatever="#getbootstrap" data-target="#exportComplaintsId"
ng-click="getComplaintId(1)" data-keyboard="false">Export
</button>
</div>
</div>
</div>
My CSS code is:
#media only screen and (max-width: 320px){
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 568px) {
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 640px) {
.rghtFlt{
float: none !important;
}
}
.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}
Toggle Navigation JS Script:
// toggle nav bar
function openNav() {
var marginLeftContent = document.getElementById("user_name");
if (marginLeftContent.style.display === 'none') {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
document.getElementById("sidebar-left").style.width = "230px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "block";
document.getElementById("main-header").style.marginLeft = "228px";
document.getElementById("main-footer").style.marginLeft = "230px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '230px';
} else {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
document.getElementById("sidebar-left").style.width = "70px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "none";
document.getElementById("main-header").style.marginLeft = "70px";
document.getElementById("main-footer").style.marginLeft = "70px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '69px';
}
}

Finally achieved my self what I'm expecting the result, I created the custom column width code instead of bootstrap width class after that it is working
My CSS code:
.col-md-1-complnts {
width: 12.29%;
}
.col-md-1-complnts-four {
width: 5%;
}
.col-md-4-complnts-search {
width: 41% ;
}
My HTML code:
<div class="row">
<div class="col-md-1-complnts-four col-xs-2 " style="position: initial !important;">
<button type="button" class="btn btn-info " ng-click="backtodashboard()"><i
class="fa fa-reply"></i></button>
</div>
<div class="col-md-2 col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;">
<button type="button" class="btn btn-success" data-toggle="modal" style="width: 100%"
data-target="#complaisntsmodel" data-whatever="#getbootstrap" ng-click="complaints();complaintsresp();setFormPristine()"
data-keyboard="false">
<i class="fa fa-plus-circle"></i>
Rise Complaint
</button>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="totalPlayComplaints()">
<div class="col-mds-3">
<span>Total:Play {{playareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="isPlaySolved()">
<div class="col-mds-3">
<span>Solved: {{playareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{playareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{playAreacanceled||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-10 " style="position: initial !important;" >
<div class="form-group form-inline ">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter" style="width: 100%"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All" >All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-4-complnts-search col-xs-12 " style="position: initial !important; margin-bottom: 10px; ">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1-complnts col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;" >
<button type="button" class="btn btn-success " style="width: 100% !important" data-toggle="modal" data-whatever="#getbootstrap" data-target="#exportComplaintsId" ng-click="getComplaintId(2)" data-keyboard="false">Export
</button>
</div>
</div>
Nothing changed anything in toggle navigation JS

Angular FileUploader - has URL with undefined

I have a following controller:
controllersAdmin.controller( 'productCreate' , [ '$scope' , '$http' , '$timeout', 'checkToken', 'categoriesService', 'FileUploader', function( $scope , $http, $timeout, checkToken, categoriesService, FileUploader ){
$scope.product = {};
// get products
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
}, ( function(){
console.log( 'Error on communicate with API.' );
}));
// init uploader
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
In a template controlled by this controller i have following:
<h3>Upload product photo</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
Drag & drop photo here
</div>
</div>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
<input class="btn btn-default" type="file" nv-file-select="" uploader="uploader" multiple /><br/>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
First I am getting data by $http.post from my API.
Then I initialize file uploader based on $scope.product['id'], however it shows me URL: api/admin/images/upload/undefined so $scope.product['id'] is undefined outside $http.post.
How do I access this variable after getting data from $http?

The $http.post method returns a promise because it is an asynchronous action.
Because of that you are initialization the uploader before the function inside the then is executed, so $scope.product['id'] still has an undefined value.
Try to initialize the uploader ($scope.uploader) inside the on fulfill function of the promise.
E.g:
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
}, (function(){
console.log( 'Error on communicate with API.' );
}));
To avoid getting an error because $scope.uploader is not yet defined (it's creation is delayed by the http call) you can use ng-if="uploader !== undefined" before using the upload directive.

get data from modal and display it in a parent controller table

I would like to know how we can pass the data from modal and display them in a main controller table. On click of generate button in modal am getting input text data and displaying it in the table. But table is not updated with the data. Here is my plunkr- https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview
// Code goes here
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$scope.Catalogs = [];
$scope.phNumber = [];
$scope.schema=[{"value":"2.0"},{"value":"2.2"}];
$scope.revision=[{"value":"ARev"},{"value":"XRev"}];
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.components = data;
/*for(var i = 0; i< data.length; i++) {
$scope.components = data[i].description;
//alert(data[i].description + components);
}*/
}
);
// rest call to get System Models
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.systems = data
for(var i = 0; i< data.length; i++) {
phNumber = data[i].platform_id;
}
}
);
$scope.change = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
templateUrl : 'modalView1.html',
controller : 'ModalInstanceCtrl',
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
}
var modalInstance = $uibModal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
});
myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.submitData = function() {
$scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
$uibModalInstance.dismiss('submit');
};
});
// modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">×</button>
<h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
</div>
<div class="modal-body" name="modalData">
<div class="row">
<div class="col-md-12 ">
<form>
Catalog Name: <input type="text" data-ng-model="catalogName"/>
</form>
</div>
</div>
<div class="row" >
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Schema</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="sc in item.schema">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Revision</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="re in item.revision">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size:12px">Component Type</span>
<div style="height:180px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat="x in item.components">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-3 dell-bannercolor">
<span style="font-size:12px">System Model</span>
<br/>
<div style="height:150px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat = "y in item.systems">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
</div>
// html code
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<style>
.dell-bannercolor {
color: #0085C3;
}
//
adding this code for vertical line -- start
.line {
position: relative;
}
.line:after {
content: '';
position: absolute;
right: 0;
border-right: 1px solid #cfc7c0;
top: 10%;
bottom: 10%;
}
//
end
</style>
</head>
<body ng-app="myTable" ng-controller="tableCtrl">
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div >
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tbody>
<tr>
<th>Catalog Name</th>
<th>Validation</th>
<th>publishing</th>
</tr>
<tr data-ng-repeat="catalog in Catalogs">
<td>{{catalog.name}}</td>
<td>{{catalog.validation}}</td>
<td>{{catalog.publishing}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="change()">Clone</button>
</div>
</div>
</div>
</body>
</html>

See this https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview
you Need to pass it while closing modal and get in controller
$uibModalInstance.dismiss($scope.item.Catalogs);

you can use $rootScope
myTable.controller('tableCtrl', function($scope, $rootScope,$http, $uibModal) {
$rootScope.Catalogs = [];
})
in another controller just push into catalogs not into item.catalogs
myTable.controller('ModalInstanceCtrl', function ($scope,$rootScope, $uibModalInstance, item) {
$scope.submitData = function() {
$rootScope.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
}
});

Table Row Sliding Bug - MVC 5

I am currently implementing the answer to the question here:Can a table row expand and close? and everything currently works 100%!
However, as you can see in the picture there is a small gap between the rows, I want this gone for two reasons.
I simply would prefer there to be no gaps, I want the rows to all smoothly lay on top of each other until expanded.
If I click on that tiny gap it will close upwards, and then the normal open/close function no longer works for the row above it.
Any help appreciated!
I put an arrow by one of the gaps
Here is my entire View for that page (just for reference), BOTH the JS Script and the extra content (<td colspan="12">) can be found at the bottom of the page.
#model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>
</div>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">#Html.DisplayNameFor(model => model.Role)</span></h3>
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieName)</span>
</td>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.employeeName)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.Role)</span>
</td>
<td class="col-lg-3">
<button type="button" class="btn btn-warning col-lg-3" onclick="location.href='#Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
<button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>
<button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
MovieID: #Html.DisplayFor(modelItem => item.movieID)
<br />
Description: #Html.DisplayFor(modelItem => item.movieDescription)
</p>
</td>
</tr>
}
</table>
</div>
<script>
$(function () {
$("td[colspan=12]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") == 12) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>

It looks like you're using Bootstrap. The default styles in Bootstrap applies a 5px padding to tds inside .table-condensed. You can override this with the following rule in your CSS...
.table>tbody>tr>td {
padding: 0px;
}
If you only want the padding removed when the p is collapsed, you can change the rule to include a nopadding class...
.table>tbody>tr>td.nopadding {
padding: 0px;
}
And use jQuery to attach the class to the td when you collapse the p...
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function () {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
});
});
JSFiddle

Nervgh Angular File Upload - How to limit the number of images to upload?

I am just testing out this Angular module "Nervgh Angular File Upload" for file upload and so far I was able to get it to work as per the example given in the instruction which is great. This allows multiple uploads. Although I read through the properties and methods I can use, I still dont know how to limit the number of uploads to be allowed. For instance, in my form I dont want to allow users to upload more than 3 photos. How can I do that?
ATM, I am using the following code as per the example given in the link above:
<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Uploads only images (with canvas preview)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- Fix for old browsers -->
<script src="../bower_components/es5-shim/es5-shim.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--<script src="../bower_components/angular/angular.js"></script>-->
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="../../angular-file-upload.js"></script>
<script src="controllers.js"></script>
<script src="directives.js"></script>
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.ng-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
canvas {
background-color: #f3f3f3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
border: 1px solid #c3c3c3;
height: 100px;
margin: 6px 0 0 6px;
}
</style>
</head>
<!-- 1. ng-file-drop | ng-file-drop="options" -->
<body ng-controller="TestController" ng-file-drop>
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active dropdown">
Demos <b class="caret"></b>
<ul class="dropdown-menu">
<li>Simple example</li>
<li class="active">Uploads only images (with canvas preview)</li>
<li>Without bootstrap example</li>
</ul>
</li>
<li>View on Github</li>
<li>Download</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. ng-file-over | ng-file-over="className" -->
<div class="well my-drop-zone" ng-file-over>
Base drop zone
</div>
<!-- Example: ng-file-drop | ng-file-drop="options" -->
<div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }" ng-file-over="another-file-over-class">
Another drop zone with its own settings
</div>
</div>
<!-- 2. ng-file-select | ng-file-select="options" -->
<input ng-file-select type="file" multiple />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h2>Uploads only images (with canvas preview)</h2>
<h3>The queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<p>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</p>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Does anyone know how to put a limit on the maximum number of file uploads that can be allowed in this form?

using angular-file-upload v1.0.2
There are predefined filters
https://github.com/nervgh/angular-file-upload/wiki/Module-API#predefined-filters
Predefined filters
folder
queueLimit
set the limit:
var uploader = new FileUploader({
queueLimit: 1
});
then in the view.
<element nv-file-drop filters="queueLimit"></element>
If you have set queueLimit to 1 but don't want it applied. Set the filters attribute to an empty string. When filters attribute is not set, all filters apply.
<element nv-file-drop filters=""></element>
I found that multiple filters must not be separated with a space like the doc suggest. Or else only the first filter apply.
<element nv-file-drop filters="filterName1,filterName2"></element>

I contacted the Module author on this and he was really kind in replying to my question. Here is his response on how we can limit the number of file uploads:
You could use "ng-disabled" directive and filters of uploader https://github.com/nervgh/angular-file-upload/issues/67#issuecomment-35322492

Following worked for me
uploader = new FileUploader({
queueLimit: 1
});