chess board (box spacing) with css - spacing

I'm trying to make like the picture but I cant figure out how to make spaces between the boxes and how to make inside square?here is what I'm trying to acheave
html not full
<table>
<div>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</div>
<div>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</div>
<div>
CSS
th {
width: 50px;
height: 50px;
padding: 15px;
}
th:nth-child(even) {
border: 5px solid rgb(89, 218, 89);
background: orangered;
}
th:nth-child(odd) {
border: 5px solid orangered;
background: rgb(89, 218, 89);
}

Related

Why is <tfoot> only shows in the last page when printing?

I am trying to print a html using dompdf and I am trying to add a footer but the footer only shows only the last page in print view? Is it a chrome bug?
<table class="table table-bordered" cellspacing="0" style="color:black">
<thead>
<tr>
<th scope="col" style="border-top: color: white; border-left: color: white;border-right: color: white;" colspan="4"> </th>
</tr>
<tr class="text-center">
<th scope="col" class="align-middle" ></th>
<th scope="col" class="align-middle text-nowrap">Reference No.: BatStateU-FO-ESO-01</th>
<th scope="col" class="align-middle text-nowrap">Effectivity Date: January 3, 2017</th>
<th scope="col" class="align-middle text-nowrap">Revision No.: 00</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<p class="title-tab"><input type="checkbox" style=" transform : scale(2);"> Extension Service / Training is requested by clients.</p> <br>
<p class="title-tab"><input type="checkbox" style=" transform : scale(2);" checked> Extension Service / Training is Department’s initiative.</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="4"> </th>
</tr>
</tfoot>
</table>

Jquery Datatable referenced only through CDN works not with script files

I want to call my datatable by referencing relevant jquery files in MVC. But when I try to call dataTable instance it fails.
The error in chrome shows 'dataTable()' function not recognized or sometimes the jquery or $ is not recognized.
Following is my code with CDN which works:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>`<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
</div>
$('#datatable').dataTable();
Now if I call the same code referencing dataTable script files downloaded via 'Add -> Client Side Library' from visual studio and downloading datatable cdnjs files, it fails.
Following code fails:
<link href="~/lib/datatable/css/datatable.min.css" rel="stylesheet" />`<script src="~/lib/datatable/js/datatable.jquery.min.js"></script>`<script src="~/lib/datatable/js/datatable.min.js"></script>
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
<script>
$('#datatable').dataTable();
</script>
Any help or suggestions or ideas, on how to reference jquery files for datatable in MVC 5 project?.
Thanks In Advance!!!..

Everything seems ok. you just need to add call datatable method in document ready function
<script>
$(function(){
$("#datatable").dataTable();
})
</script>
After adding Ready function. check you are not loading JQuery twice.(ie. check in _Layout.cshtml page.)if so remove jquery reference from view.
Also make sure you are referencing valid datatable.js path.

You should change jQuery version to jQuery 1.11.3
https://datatables.net/blog/2015-04-30

print specific div from the page position cant controled

i have html page
<table class='table table-responsive table-hover table-responsive sortable draggable' id='print' border='5'>
<thead>
<tr class='warning'>
<td>head1 <a class='delete'>delete</a></td>
<td>head2 <a class='delete'>delete</a></td>
<td>head3 <a class='delete'>delete</a></td>
</tr>
</thead>
<tbody>
<tr>
<td>body1 body1 body1dfsffffffffffffffffffffffff </td>
<td>body2</td>
<td>body3</td>
</tr>
<tr>
<td>body4</td>
<td>body5</td>
<td>body6</td>
</tr>
<tr>
<td>body7</td>
<td>body8</td>
<td>body9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
and when i need to print the page i just want to print the table
i used this css ..
#media print
{
body *
{
visibility: hidden;
}
#print, #print *
{
visibility: visible;
}
#print
{
position: absolute;
left: 0;
top: 0;
}
}
and when i print the screen the table come in the center not in the top 0px
how cound i let the table be absolute;
its not working
thank you

Can't set innerHTML of a div with Html.Action("_TaskDetail", "ProTask")

In a Click handler I am trying to set the innerHTML of a div(detail_popup) with a MvcHtmlString.
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
Note: _TaskDetail is a partial view.
If I look at Bobo in debug using the HTML visualizer it is perfect.
I then assign innerHTML as such: detail_popup.innerHTML = #Bobo;
This generates a script error ... SCRIPT1002: Syntax error
I am about to lose my gourd! Any help would be much appreciated.
Bob
This is the MvcHtmlString Bobo whose assignment gives me script errors:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:08:14 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
I have pulled my hair out
Following is an abbreviated version of my partial view:
#model PromanV3.Models.ProTask
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
#System.DateTime.Now
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.TaskName)</td>
<td>#Html.DisplayFor(model => model.TaskDesc)</td>
<td>#Html.DisplayFor(model => model.TaskOwnerName)</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.Duration)</td>
<td>#Html.DisplayFor(model => model.CompPercentage)%</td>
<td>#Html.DisplayFor(model => model.TaskOptions)</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.RevisionDT)</td>
<td>#Html.DisplayFor(model => model.ProjectId)</td>
<td>#Html.DisplayFor(model => model.TaskId)</td>
</tr>
</table>
</div>
</body>
</html>
The is my div
<!-- Begin section that generates the detail popup for the task -->
<div id="DetailBox"
style="display: none;
z-index: 1000;
border: 2px solid blue;
background: yellow;
fill: white;
color: black;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
font: 14px Nautilus Pompilius;
width: 150px;
height: 65px;
">
<script>
#{
ViewBag.vwbProject = 15;
if (ViewBag.vwbTask==null)
{ViewBag.vwbTask = 1;}
}
</script>
</div>
This is my click handler:
function setMouseClickmt(xpos, ypos, width, height, message)
{
function inner()
{
var MultTxtBoxID = this.node.getAttribute("id"); // 'this' refers to the clear_rect (clear rectangle) of the SVG MultTxtBox
var MultTxtBoxElement = document.getElementById(MultTxtBoxID); // grab the element
var task_ID = MultTxtBoxElement.getAttribute("id");
var detail_popup = document.getElementById('DetailBox');
var task_index = getTaskPos(task_ID, arr_of_Tasks);
detail_popup.setAttribute('data-task',task_index);
detail_popup.setAttribute('data-project',15);
var tt = detail_popup.getAttribute('data-task');
var pp = detail_popup.getAttribute('data-project');
var ldt = new Date();
var ldts = ldt.toLocaleString();
//detail_popup.innerHtml = ldts + '</br>' + tt ;
#{
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
};
detail_popup.innerHTML = #Bobo;
/* Make the 'DetailBox' div appear */
detail_popup.style.display = 'block';
detail_popup.style.top = (100) + 'px';// '400px';//works//mTop + 'px';
detail_popup.style.left = (1200) + 'px';// //works//mLeft + 'px';
detail_popup.style.width = 250;//width;
detail_popup.style.height = 500;//height;
}
return inner;
}
This is the script output that it chokes on:
detail_popup.innerHTML =
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:21:34 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
;

Please try this...
From the razor page, pass the value of Model (#Bobo) to your JS file
<script>
var tempValue = '#Bobo';
setMouseClickmt(tempValue , yourOtherValues....);
</script>
and assign the value passed in your click handler in your JS
detail_popup.innerHTML = tempValue ;
Add the single quotes around #Bobo when you use it in the script tag of the razor page.
Hope it helps

How to fit a wide table using jspdf, jspdf-autotable

I'm using jspdf with the plugin jspdf-autotable to create a pdf for a very wide table, is there a way to auto fit the table/column data to any page size?
I tried the code below with overflow: 'linebreak' but it breaks the words halfway not at the empty space
function demoPDF() {
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
var res = pdf.autoTableHtmlToJson(document.getElementById("rpt_tbl"));
pdf.autoTable(res.columns, res.data, {
startY: 60,
tableWidth: 'auto',
columnWidth: 'auto',
styles: {
overflow: 'linebreak'
}
});
pdf.save(pdfsize + ".pdf");
};

I'm not completely sure I understood your question, but if you want some columns to simply wrap the content and some to linebreak you can to like this.
function demoPDF() {
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
pdf.autoTable({
html: '#table',
startY: 60,
styles: {
fontSize: 50,
cellWidth: 'wrap'
},
columnStyles: {
1: {columnWidth: 'auto'}
}
});
pdf.save(pdfsize + ".pdf");
};
demoPDF();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<table id="table" style="display: none;">
<thead>
<tr>
<th title="Field #1">ID</th>
<th title="Field #2">First name</th>
<th title="Field #3">Last name</th>
<th title="Field #4">Email</th>
<th title="Field #5">Country</th>
<th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0#furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice</td>
<td>Henry</td>
<td>jhenry1#theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2#constantcontact.com</td>
<td>Trinidad</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3#psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4#go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5#com.com</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>

Resources