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
Related
I work wit DataTables and would like to realize drag and drop reordering.
My Code a the moment:
HTML
<div class="table-responsive">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS
var tablePositionen = $('#tablePositionen').DataTable({
columnDefs: [
{ targets: [0], orderable: true, className: 'reorder' },
{ targets: '_all', orderable: false }
],
"ordering": false,
"paging": false,
rowReorder: true,
"lengthMenu": [[10], [10]],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
My Table looks like this:
And If now drag and drop the second row above the first row, the other columns values will not be the correct one:
Where is my mistake??
The changes I made to resolve your issue:
(1) Added a "sequence" column as the first column in the table.
(2) Changed the DataTable initialization options to hide that sequence column, and, instead, allow the user to perform a drag from anywhere in a row (as opposed to the default location which is the first column only).
(3) Removed the remaining unneeded options (although you can add back anything you need such as "paging": false). Note that some options contradicted each other, such as paging and lengthMenu.
(4) Made a minor change to the language URL (too many forward slashes). This is not relevant to the drag/drop issue.
Here is the result:
$(document).ready(function() {
var tablePositionen = $('#tablePositionen').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [
{ targets: 0, visible: false }
],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- row reorder -->
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/>
</head>
<body>
<div style="margin: 20px;">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Seq.</th>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Just to add: All of the row reorder examples use an initial column to support reordering (the Seq. column I added). This is required - although I don't recall seeing this explicitly mentioned in the documentation. For your case, I chose to hide this initial (but required) column, and use the "full row" drag option.
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
Here is my problem. My columns are overflowed and I can't see it.
I know that some columns have a lot of data.
How can I edit HTML or CSS for that? This web I'm writing by Laravel framework.
Here is my source code, please view it. I'm using bootstrap for this.
<div class="box" ng-controller="TinTucNewController">
<div class="box-header">
{{csrf_field()}}
<h3 class="box-title">Danh Sách Tin Tức</h3> <br>
<button class="btn btn-new btn-xs btn-create">
<span class="glyphicon glyphicon-plus"></span>" Bấm vào đây để thêm dữ liệu"</button>
</div>
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead><tr>
<th>Mã Tin Tức</th>
<th>Thể Loại</th>
<th>Tiêu Đề</th>
<th>Tóm Tắt</th>
<th>Nội Dung</th>
<th>Hình Ảnh</th>
<th>Nổi Bật</th>
<th>Lượt Xem</th>
<th>Tạo mới</th>
<th>Cập nhật</th>
<th>Trạng thái</th>
<th>Công Cụ</th>
</tr>
</thead>
#foreach($ds_tt as $tt)
<tbody><tr>
<td>{{$tt->tt_ma}}</td>
<td>{{$tt->tt_theLoai}}</td>
<td>{{$tt->tt_tieuDe}}</td>
<td>{{$tt->tt_tomTat}}</td>
<td>{{$tt->tt_noiDung}}</td>
<td>
<img width="80" height="50" src="{{asset('upload/tintucnew/'.$tt->tt_hinh)}}"/>
</td>
<td>
#if($tt->tt_noiBat == 0){{'Tin Thường'}}
#else
{{'Tin Hot'}}
#endif
</td>
<td>{{$tt->tt_luotXem}}</td>
<td>{{$tt->tt_taoMoi}}</td>
<td>{{$tt->tt_capNhat}}</td>
<td><?php echo ($tt->tt_trangThai==2)?'Khóa':'Khả dụng' ?></td>
<td>
<button class="btn btn-warning btn-xs btn-edit">
<span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs btn-delete"
ng-click="confirmDelete({{$tt->tt_ma}})">{{ method_field("DELETE")}}
{{csrf_field()}}
<span class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
</div>
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);
});
},
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