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
Related
I created one grid view to get the database table details,
here, when I click the Next Sync button it will pop up this box and I can choose the date and time,
but the problem is when I clicked any Next Sync button only change the first DateTime only,
this is the code of the table grid view
<table class="table table-striped border-bottom">
<thead>
<tr>
<th>Select to Sync.</th>
<th class="sorting">Source</th>
<th>Last Sync. Date</th>
<th>Download</th>
<th>Status</th>
<th>Next Sync Schedule</th>
<th>Schedule</th>
</tr>
</thead>
<tbody data-bind="foreach: PayrollIntegrationVM.GridDataList">
<tr>
<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
class="i-checks" name="foo"></td>
<td data-bind="text:SHTYP_NAME"></td>
<td data-bind="text: moment(SHTYP_LAST_DATE).format('L LTS')"></td>
<td>
<div data-bind="ifnot: SHTYP_SYNC_STATUS">
<a href="#" data-bind="click: PayrollIntegrationVM.ErrorLog">
<span class="mr-2">
<img src="~/Content/img/icon-excel.png"
alt="Download">
</span> Download Error Log
</a>
</div>
</td>
<td data-bind="text: SHTYP_SYNC_STATUS? 'Success' : 'Failed'"><a href="#">
<i class="fa fa-close text-danger"></i></a></td>
<td data-bind="text: moment(SHTYP_NEXT_DATE).format('L LTS')" id="SHTYP_NEXT_DATE_GET"
name="Sync_Next_Date"></td>
<td><a href="#" id="Next-Sync-Value" data-toggle="modal" data-target="#sync"
name="Next_Sync_button">Next Sync.</a></td>
</tr>
</tbody>
this is the date time picker code
<div class="modal" id="sync" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="col ml-5 d-flex flex-column justify-content-end">
<input type="date" class="form-control" id="NextSyncDate">
<input type="time" class="form-control mt-2" id="NextSyncTime">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="DoneButtonFunction()">Done</button>
</div>
</div>
</div>
</div>
this is the script part
<script language="JavaScript">
function DoneButtonFunction() {
var nextSyncDate = $('#NextSyncDate').val();
var nextSyncTime = $('#NextSyncTime').val();
var DateTime = nextSyncDate +" "+ nextSyncTime;
document.getElementById('SHTYP_NEXT_DATE_GET').innerHTML = DateTime;
}
}
</script>
it looks like in your js function, you find the element with the ID 'SHTYP_NEXT_DATE_GET', and js looks for the first one, try to save the row in the table, or find another way to Identify which 'SHTYP_NEXT_DATE_GET' element you want to edit
I have View where I show some data via table
Here is code
#foreach (var item in Model)
{
<tr >
<td class="point">
#(rowNo += 1)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Email)
#Html.Hidden("clientEmail", item.Email)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Position)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Company.CompanyName)
</td>
<td style="text-align: end;">
<button type="submit" id="send" class="sendinviteclass" style="color: white">Отправить приглашение</button>
I have button with id="send" and I need to get Email by it via JS.
My trouble in that - I can have for example 5 rows in table and so I can have 5 buttons.
How I can get value from email what I need via JS?
UPDATE
Here is page source code
<div style="padding-left: 70px; padding-bottom: 20px;">
<p>
<a href="/">
<img src="/images/logo.png" alt="image" height="100px" width="110px">
</a>
</p>
</div>
<div class="navbar">
<div class="container" style="position: relative">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/">Видео Интрервью</a>-->
</div>
<div class="navbar-collapse collapse center-block">
<ul class="nav navbar-nav">
<li>Компании</li>
<li>Подтвержденные</li>
<li>Приглашения</li>
<li>Создать интервью</li>
<li>Просмотр</li>
<li>Входящие</li>
<li>Архив</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="6_mqaCf427P4eDczunVjASai_ZRrITyXFFtIwygRva6gR8Mr5nNZJqU8IBwTbt_HYx8bjjz81WHzLkbljebv6iALVFrIFh7N-KDi3rc6nJ_o8m3fYOsciskGTOX6stGRPop_D7qr240jQ2disCDSkg2" /> <ul class="nav navbar-nav navbar-right">
<li>
</li>
<li>Выйти</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<form action="/Clients/SendEmail" method="post"><form action="/Clients" method="post"> <table class="table">
<tr style="background: #d1d3d4">
<th></th>
<th style="font-size: 20px; text-align: center;">
Email
</th >
<th style="font-size: 20px; text-align: center;">
Клиент
</th>
<th style="font-size: 20px; text-align: center;">
Должность
</th>
<th style="font-size: 20px; text-align: center;">
Компания
</th>
<th></th>
</tr>
<tr>
<td style="height: 40px; width: 40px; background: red;">
<a href='/Clients/Create'>
<img style="object-fit: cover;" src='/Images/plus.png'/>
</a>
</td>
</tr>
<tr >
<td class="point">
1
</td>
<td class="email_text" style="text-align: center; font-size: 18px;">
nemesises#live.com
<input id="clientEmail" name="clientEmail" type="hidden" value="nemesises#live.com" />
</td>
<td style="text-align: center; font-size: 18px;">
Сухомлин Евгений
</td>
<td style="text-align: center; font-size: 18px;">
C# Developer
</td>
<td style="text-align: center; font-size: 18px;">
Фокстрот
</td>
<td style="text-align: end;">
<button type="button" onclick="sender()" data-email="nemesises#live.com" id="email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
<a href='/Clients/Edit/2033'>
<img src='/Images/Edit.png'/>
</a>
<!-- <a class="editclass" href="/Clients/Edit/2033">Редактировать</a>-->
<a href='/Clients/Delete/2033'>
<img src='/Images/Delete.png'/>
</a>
</td>
</tr>
</table>
</form><script>
function sender(element) {
$(element).data('email');
alert(email);
}
</script>
Add data- prop to your button like:
<button type="submit" id="send" onclick="sender(this)" data-email="#item.email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
And in JS:
var email = $(this).data('email')
Assuming this is your button.
I have used angular-file-upload to upload files, files are uploading everything working fine.
Now, I have to add restriction that user can not able to upload more
then 5 pictures and at one shot single file should upload How is it possible,
Below is my code
Controller
'use strict';
angular.module('Modulename')
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: site_url+'upload.php'
});
// FILTERS
uploader.filters.push({
name: 'imageFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
// fileItem.upload();
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
View section
<section ng-switch-when="1" class="form-section {{animationClass}} wow" ng-class="{{animationClass}}" ng-controller ="AppController" nv-file-drop="" uploader="uploader">
<div class="form-section-block">
<h3 class="heading text-center">Upload photos</h3>
<!-- Upload demo area -->
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-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>
<div class="row">
<div class="col-md-3">
<h3>Select files</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" options="{autoUpload :'true'}">
Base drop zone
<input type="file" nv-file-select="" uploader="uploader" multiple />
</div>
</div>
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<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>
</div>
</div>
<!-- Upload demo area -->
<div class="col-md-4 col-sm-4 label-block"></div>
<div class="col-md-6 col-sm-8 signup-full-column">
<div class="stepToggle-btn">
<span class="">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</span>
<button type="submit" class="btn btn-success down" data-toggle="tooltip" tooltip-placement="top" uib-tooltip="Next Step" ><i class="fa fa-angle-down" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</section>
You can use the queue limit filter for this
var uploader = new FileUploader({
queueLimit: 1
});
<element nv-file-drop filters="queueLimit"></element>
I am trying to make UL.pagination to be in the center of the view-area of the parent, without using float as it will interrupt my style.
Would this possible?
I am not familiar with SO yet, but my point is to trigger scrollLeft of .pagination parent to keep pagination in the center of its parent.
This is my try on jsFiddle
/* my goal is to make pagination in the center of the view-area */
$.fn.StickyX = function() {
// alert(this.parentNode.clientWidth);
// alert($(this).parent().innerWidth());
return this.css({
'margin-left': ($(this).parent().innerWidth() / 2) - ($(this).width() / 2) + 'px',
'position': 'inline'
});
};
$('.pagination').StickyX();
#dataTable .pagination {
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="wrapper">
<div id="header">
Header
</div>
<div class="row">
<div class="col-xs-9 contents">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed" id="dataTable">
<thead class="text-primary">
<tr>
<th role="group" aria-label="">
<button type="button" class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus"></i>
</button>
<button type="button" class="btn btn-default btn-refresh"><i class="glyphicon glyphicon-refresh"></i>
</button>
</th>
<th>id</th>
<th>User name</th>
<th>password</th>
<th>Full name</th>
<th>Email</th>
<th>URL</th>
<th>Join date</th>
<th>activation_key</th>
<th>lastupdate</th>
<th>status</th>
<th>groupID</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>1</td>
<td>admin.admin</td>
<td>**********</td>
<td> </td>
<td> </td>
<td> </td>
<td>2015-12-07 02:37:47</td>
<td> </td>
<td>2015-12-06 18:37:47</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>Super Admin</td>
</tr>
<tr id="row-2">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>2</td>
<td>demo.demo</td>
<td>***********</td>
<td> </td>
<td> </td>
<td> </td>
<td>0000-00-00 00:00:00</td>
<td> </td>
<td>2016-01-05 12:45:32</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>demo</td>
</tr>
<tr>
<td class="page-control" colspan="13">
<ul class="pagination">
<li class="disabled">
<a href="#Prv" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">1<span class="sr-only">(current)</span>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>
<a href="#Nxt" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="col-xs-3">
[Menu]
</div>
</div>
<div>
Footer
</div>
</div>
I made some modification js which some how solve the issue, but still need some more help.
jsfiddle
(function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
$.fn.hasScrollBar = function() {
var e = this.get(0);
return {
vertical: e.scrollHeight > e.clientHeight,
horizontal: e.scrollWidth > e.clientWidth
};
}
})(jQuery);
$.fn.StickyX = function() {
var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first();
if(parentWithScroll) {
var e = $(this);
parentWithScroll.scroll(function() {
e.css('margin-left', ($(this).width() / 2) - (e.width() / 2) + $(this).scrollLeft() + 'px');
})
return this.css('margin-left', (parentWithScroll.width() / 2) - ($(this).width() / 2) + parentWithScroll.scrollLeft() + 'px');
} else {
return this.css('margin-left', 'auto;');
}
};
$('.pagination').StickyX();
to achieve this you only need css and html.
Try this:
td.page-control { text-align:center; }
ul.pagination { margin:0 auto; }
Adapt the code to make sure it's not overridden by your existing styles.
And disable the javascript that is adding the margin to the ul
https://jsfiddle.net/ksqzpfm9/1/
You can use the same method to horizontally center other elements
The application is running on sails.js as backend and Angular as frontend,
It is CRUD application and there two pages, one is the main Dashboard and other is Search.html that have advanced search functionalities.
here the thing two pages, use identical ng-repeat that inject same html page which contain same function with same controller that use same service.
Here how it goes, I click on the delete button which fire showCancelQuoteModal(quote), then I click on the confirmation and fire ng-click=cancelQoute which pass decisionFrom without any problems.
now in cancelQouteModalCtrl both qoute and decisionForm are passed without a problem to qouteLogService, where qoute still there and qoutelog contain cancellationReason.
and qoute.post should return createdQouteLog but it doesn't in search .html and does in Dashboard.html
when I started tracking and watching the var, everything disappear when the code get in Angular.js and the following stack
$scope.apply() / $scope.digest() /$scope.eval() /processQueue()
here the table of Dashboard.html and search.html
<table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
data-page-size="{{pageControl.pageSize}}">
<thead>
<tr>
<th data-type="date">Last Update</th>
<th>Client</th>
<th>Phone</th>
<th>Dealer</th>
<th>Assigned To</th>
<th data-type="numeric">Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
<td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
{{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
</td>
<td>{{quote.client.name}}</td>
<td>{{quote.client.phone | tel}}</td>
<td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
<td ng-if="!quote.dealershipCompany">Online</td>
<td>{{username(latestQuoteLog.assignedTo)}}</td>
<td data-value="{{latestQuoteLog.status}}">
<span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
{{quoteStatusPrettyNames[latestQuoteLog.status]}}
</span>
</td>
<td>
<div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
aria-valuemax="100" ng-
style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
</div>
</td>
<td>
<div class=" btn-group">
<button class="btn btn-sm btn-icon btn-default"
ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
ng-click="showCancelQuoteModal(quote)">
<i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="editQuote(quote)">
<i class="glyphicon glyphicon-edit" tooltip="Edit Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="viewQuote(quote)">
<i class="glyphicon glyphicon-eye-open" tooltip="View Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Broker"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Processor"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="9" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
here cancelModal
<script type="text/ng-template" id="cancelQuoteModal.html">
<div class="modal-header">
<form name="decisionForm" class="form-horizontal wrapper input-set">
<div class="col-md-10">
<label>
<h4 class="font-thin">Why it is not sold ?</h4>
</label>
<select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
<option ng-repeat="reason in rejectionReasons" value="{{reason}}">
{{reason}}
</option>
</select>
<small
ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
class="b-light m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
<button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
</div>
</script>
Here CancelModalController
.controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
$scope.rejectionReasons = rejectionReasons;
$scope.reasonForRejection;
$scope.cancelQuote = function (decisionForm) {
if (decisionForm.$invalid) {
$scope.showErrors = true;
} else {
quoteLogService.create(quote, {
'status': 'quoteCancelled',
'cancellationReason': $scope.reasonForRejection
}, function (createdQuoteLog) {
$modalInstance.close('Quote cancelled successfully!');
}, function (err) {
$modalInstance.dismiss('Error creating new quoteLog');
console.log('Error creating new quoteLog', err);
});
}
};
$scope.cancelBox = function () {
$modalInstance.close();
};
}]);
And here QouteLogService.js
QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
return {
create: function(quote, quotelog, success, error) {
quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
success(createdQuoteLog);
}, function(err) {
error(err);
});
},