HI all I have following html,cc & js code.I am only able to print visible parts of the below table. when more contents comes I have applied css to make a table scrollable and user can scroll and see all the data inside the table.but when I am trying to print I am not able to print entire contents of the table.
It always print visible parts in the sheet.
The following table use bootstrap 3 styles inside table.
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="page-logo">
<a href="index.html">
<img src="assets/layouts/layout3/img/Logo5.png" alt="logo">
</a>
</div>
<h5 class="modal-title" id="exampleModalLongTitle">Receipt Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="printThis">
<div class="portlet-body">
<div class="table-scrollable" style="height:170px;overflow:auto;">
<table class="table table-hover">
<thead>
<tr>
<th> # </th>
<th>VOC ID </th>
<th>Plate No</th>
<th>Operation</th>
<th>Date & Time</th>
<th>Amount Paid </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 12345678 </td>
<td> AB 34567 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
<tr>
<td> 2 </td>
<td> 1245666 </td>
<td> YA 56789 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
<tr>
<td> 4 </td>
<td> 73214666 </td>
<td> AA 45678 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
</tbody>
</table>
</div>
<div class="pull-right"> Total Amount Paid: <b>45 OMR</b></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btnPrint">Print Details</button>
</div>
</div>
</div>
</div>
My css for printing
<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#printSection, #printSection * {
visibility: visible;
}
#printSection {
position: absolute;
left: 0;
top: 0;
}
}
</style>
My js for printing
<script language="javascript">
document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printThis"));
window.print();
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
}
</script>
My updated css, It works now. I just overrided height in "print.
<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#printSection, #printSection * {
visibility: visible;
height: auto !important
}
#printSection {
position: absolute;
left: 0;
top: 0;
}
}
</style>
Related
I'm trying to make a popup module that once a button is clicked, it displays a popup with some fields like name surname etc that the user can fill out and save. However i tried to do that but i can't seem to connect it together. I'm not sure if anyone can give me directions on where i'm supposed to put the html css and javascript? As im using php laravel.
This is the view page.
#extends('layouts.adminmaster')
#section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
#csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</div>
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th>
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
#if (Auth::user()->role == "admin")
<th>Action</th>
#endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
#foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>
<td>
#if ($place->status==0)
<span style="color: green">Available</span>
#endif
#if ($place->status==-1)
<span style="color: gray"> Not Available </span>
#endif
#if ($place->status==2)
<span style="color: red"> Booked </span>
#endif
</td>
#if (Auth::user()->role == "admin")
<td> Edit /
#if ($place->status == -1)
Activate
#else
Deactivate
#endif
</td>
#endif
<td>
#if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END
#endif
#if ($place->status==-1)
<span>Book</span>
#endif
#if ($place->status==2)
<span>Booked</span>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
<script>
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
#endsection
You can do it something like this
<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (£)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#foreach($orderList as $result)
<tr>
<td>{{$result->id}}</td>
<td>
{{$output[0]}} </br> {{$output[1]}}
</td>
#endforeach
</tbody>
</table>
And then add model anywhere where your section ends
<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail
</div>
</div>
</div>
<div class="orderDetail"> Order Detail </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
now when you click the anchor tag each time it will open this model.
I am making a kind of a lobby. The lobby will contain a list of games. Displayed in <table>. Each <tr> contains name, no of players etc in <td>. Now I want that when I click on the row a corresponding details of the game should be displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">Button</button>
<table class="table text-align=">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#game-1">
<td>Game 1</td>
<div class="collapse" id="game-1">Description of game 2</div>
</tr>
<tr data-toggle="collapse" data-target="#game-2">
<td>Game 2</td>
<div class="collapse" id="game-2">Description of game 2</div>
</tr>
</tbody>
</table>
I have tried to use that <div> inside <tr>. But that didn't worked well and its showing details outside table.
I want to make the details appear right after the row.
My second question is that what is the best way to on show only one deatils at a time.
Note: I know I can add another row after the row but that will ruin the structure of my table. So I don't wanna do that.
Here is simple implementation based on your code:
$(function() {
$('.collapse-item').click(function(e) {
e.preventDefault();
const target = $(this).data('target');
if (!$(target).hasClass('show')) {
$('.collapse-content').removeClass('show');
}
$(target).toggleClass('show');
});
});
.table .collapse-content > td {
padding: 0 .75rem;
}
.collapse-content > td > div {
height: 0;
opacity: 0;
}
.table .collapse-content.show > td {
padding: .75rem;
}
.collapse-content.show > td > div {
height: 100px;
opacity: 1;
}
.collapse-content > td, .collapse-content > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all ease-in-out;
transition: all 1s ease-in-out;
}
.collapse-content.show > td, .collapse-content.show > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">Button</button>
<table class="table text-align">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="collapse-item" data-target="#game-1">
<td>Game 1</td>
</tr>
<tr class="collapse-content" id="game-1">
<td>
<div>Description of game 1</div>
</td>
</tr>
<tr class="collapse-item" data-target="#game-2">
<td>Game 2</td>
</tr>
<tr class="collapse-content" id="game-2">
<td>
<div>Description of game 2</div>
</td>
</tr>
</tbody>
</table>
Alternatively, you can use Bootstrap accoridon:
#accordion {
margin: 2rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Game #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Game 1 details
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Game #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Game 2 details
</div>
</div>
</div>
</div>
You may also look at Datatables child rows. And here is sliding example.
I have the two text button Main Folder & Second Folder using the <a> tag inside the div element.
<div class="zf-folder">
<!-- another div elements -->
Main Folder
<!-- another div elements -->
</div>
Unfortunately, I have to click the text to move tabs, can't use the button (div) column to display the content.
How can I display tab content not only from text, but can from clicking on div element.
Please help me, I give a lot of code on JSFiddle.
Thanks in advance
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
._tabFolder {
cursor: pointer;
position: relative;
}
._tabFolder:hover {
background-color: rgba(255, 255, 255, 0.2)
}
._tabFolder:active {
background-color: rgba(29, 33, 41, 1)
}
._itemPosition {
align-items: center;
display: flex
}
._sideFolder {
background-color: none;
height: 90%;
left: 0;
position: absolute;
top: 2px;
width: 5px
}
._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
display: block
}
._iconText {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
margin-left: 13px;
}
._iconFolder,
._1i5x,
._1i5w {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -437px -21px;
height: 24px;
position: relative;
width: 24px
}
._5bme ._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -412px -21px
}
._icon-col {
height: 16px;
left: 4px;
position: absolute;
top: 4px;
width: 16px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="column-folder">
<ul class="nav nav-tabs" role="tablist">
<!-- *********** MAIN FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Main Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** MAIN FOLDER BUTTON ************* -->
<!-- *********** SECOND FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Second Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** SECOND FOLDER BUTTON ************* -->
</ul>
</div> <!-- Zf-Folder -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="mainTab">
<div class="row">
<div class="col-md-6">
<h3>Main Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-success btn-xs approve-off" type="submit" value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}" class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
<span class="fa fa-times"></span> Reject
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in" id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Second Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
<span class="fa fa-times"></span> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can add a span inside your link:
<a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">
Main Folder
<span class="hyperspan"></span>
</a>
And CSS:
.hyperspan
{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
This should work for you. Just add these lines to your JS:
$(".mainFolder").click(function (e) {
$(this).find("a")[0].click();
});
$(".secondFolder").click(function (e) {
$(this).find("a")[0].click();
});
Working JSFiddle https://jsfiddle.net/Karadjordje1389/h14uv4ww/
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
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