Header alignment data table after added style ='100%' - datatables

I cant align the datatable suppose to show that header and bottom must be equal but on the image below it seems it does not equal to each other
how to fix this datatable
Here is the sample code below i created to display the datatable
<div class="row" id='content'>
<div class="col-md-4 pull-left">
<div class="customCenter" >
<img class="img-responsive rounded chooseTicket rounded mx-auto d-block" src="https://www.w3schools.com/bootstrap/paris.jpg" alt="Generic placeholder image" >
</div>
<h2 class='chooseHeader'>Commendation</h2>
</div>
<div class=" " id='dataList'>
<div class="">
<table class="hover dataTable data-table test table-responsive" id="example" style="width:100%">
<thead>
<tr>
<th>Ticket Number</th>
<th>Details</th>
<th>Created Date</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>

Related

Bootstrap modal datatable for 48mm width printer

I am using a modal screen to show a datatable that summarizes a client's restaurant order. It contains a couple of div's to provide info and the mentioned table with the order (ammount, description, value).
Then, that order will be printed in a 48mm width paper special printer (POS58 Printer)
I'am struggling on how to print this information. Modal is overflowing once I try to print the modal.
I have tried so far: -Using word-break, different font-sizes but I think I am missing something.
Printing in PDF or a normal printer works perfectly fine.
Any suggestions?
<div class="modal fade" id="print_comanda" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">XX Restaurant</h5>
</div>
<div class="modal-body">
<p class="font-weight-bold" style="text-align:center">Internal Ticket</p>
<div class="text mb-3">
<div id="table_nr" style="text-align:center; font-size: 2rem;"></div>
<div id="table_hs"></div>
<div id="table_dt"></div>
<div id="table_client"></div>
<div id="table_waiter"></div>
</div>
<table width="100%" id="table_final" class="table">
<thead>
<tr>
<th scope="col" class="text-center">Ammt.</th>
<th scope="col" class="text-center">Desc.</th>
<th scope="col" class="text-center">Subtot.</th>
<th scope="col" class="text-center">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="nonPrintable2">
<div class="modal-footer">
<button type="button" id="cancel_a" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" id="btn_print" class="btn btn-dark">Print</button>
</div>
</div>
</div>
</div>
</div>

ASP.Net Core 5 Print Div Vertical Alignment Problem

I have tried various alignment settings, but nothing is making a difference. Please have a look at the far right column in the image below and notice that the price is shifted down compared with the columns to the left.
Note that this is the print preview
This is what the same table looks like on the web page when not printing.
You can see that in the web page, I have set the margin for the last column to mt-0.
Here is my code:
<div class="row">
<div class="col-4">
<button class="btn btn-primary" onclick="printDiv()">Print</button>
</div>
</div>
<div class="row" id="PrintDiv">
<div class="col-md-8 offset-2">
<div class="row d-flex">
<div class="col-8">
<p>
<h2>#ViewBag.FullName</h2>
<h4>Order History</h4>
</p>
</div>
<div class="col me-1">
<img src="#(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" )
class="img-fluid " style="max-height:75px;width:auto" alt="Alternate Text" />
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Order ID</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model)
{
<tr>
<td class="align-middle">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td class="align-middle">#order.Id</td>
<td class="align-middle">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td class="mt-0">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts{
<script type="text/javascript">
function printDiv() {
var divContents = document.getElementById("PrintDiv").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
}
Does anyone have any suggestions to make Total column align properly with the other columns?

I figured out the problem shortly after I posted the question. I realized that the Printed Version of the page would not recognize the Bootstrap classes. So instead, I changed all columns to use inline styles for alignment.
<tbody>
#foreach (var order in Model)
{
<tr>
<td style="vertical-align:text-top">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td style="vertical-align:text-top">#order.Id</td>
<td style="vertical-align:text-top">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td style="vertical-align:text-top">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>

Materialize CSS Remove table head spacing

I making a simple demo where i have few employees information. I am using materialize css table. But i am getting extra space between sr.no and other column names.
here is my code :
<br/>
<div class="row">
<div class="col l8">
<div class="card darken-2">
<div class="card-content">
<span class="card-title">{{tableTitle}}</span>
<br/>
<div class="row">
<div class="input-field col s4">
<input id="empSearch" type="text" placeholder="Search">
</div>
</div>
<br/>
<div class="row">
<div class="col lg7">
<table class="bordered highlight responsive-table">
<thead>
<tr>
<th>Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of EmployeeData;let i= index">
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td>
<i class="material-icons">delete</i>
</td>
<td>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

in the <th> you could set width="30px" or whatever your're comfortable with.
The icons, I'd put in one cell, and use text-align: right
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<thead>
<tr>
<th width="30px">Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td style="text-align: right">
<i class="material-icons">delete</i>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>

How to show each cell table data in popup window using datatables?

How to show the popup for each cell with its table data using Datatables?
In the below script script i had used datatables plugin along with alert to show popup each cell but am not getting the proper output?How can i modify the script to show each cell data in popup widow when mouse click is done inside the each cell?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<table border="1" align="center" id="example" class="display" width="100%">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>7</td>
<td>12</td>
</tr>
</tbody>
<script>
$(document).ready(function()
{
$('#example tbody').click( function () {
alert("test") ;
});
});
</script>
</table>
</html>

Important Note: Before adding code please include js && css to your page refer js which are use fiddle External Resources section.
Revamp your click function to on click function.
Javascript :
$(document).ready(function () {
var companyTable= $('#jobs').DataTable();
$('#jobs').on('click', 'tr', function () {
$("#company-full-name").val(companyTable.row(this).data()[1]);
$("#company-short-name").val(companyTable.row(this).data()[2]);
$('#DescModal').modal("show");
});
});
HTML:
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">On click row popup will get open </h3>
</div>
<table id="jobs" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Job Title</th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<!--Made it easier, so no more redundant copypasta in other pages-->
<tr>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>2</td>
<td>Administrative</td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>
<tr>
<td>3</td>
<td>Database Admini</td>
<td>Dynazzy</td>
<td>36.72</td>
<td>5082 Butterfield Ter</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>4</td>
<td>Quality Control</td>
<td>Realmix</td>
<td>23.48</td>
<td>598 Independence Cir</td>
<td>2015-02-19</td>
</tr>
<tr>
<td>5</td>
<td>Health Coach II</td>
<td>Linkbuzz</td>
<td>17.11</td>
<td>18 Donald Plaza</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>6</td>
<td>Biostatistician</td>
<td>Roomm</td>
<td>36.37</td>
<td>3 Almo Terrace</td>
<td>2015-02-16</td>
</tr>
<tr>
<td>7</td>
<td>Assistant Profe</td>
<td>Shufflester</td>
<td>29.43</td>
<td>640 Towne Terrace</td>
<td>2015-02-13</td>
</tr>
<tr>
<td>8</td>
<td>Analog Circuit</td>
<td>Tagcat</td>
<td>25.66</td>
<td>316 Claremont Road</td>
<td>2015-02-21</td>
</tr>
<tr>
<td>9</td>
<td>Structural Engi</td>
<td>Tagchat</td>
<td>35.55</td>
<td>809 Butterfield Park</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>10</td>
<td>Senior Develope</td>
<td>Browsecat</td>
<td>21.62</td>
<td>5 Sachs Court</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>11</td>
<td>Human Resources</td>
<td>Jaxbean</td>
<td>32.00</td>
<td>6 Corscot Street</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>12</td>
<td>Analyst Program</td>
<td>Jetpulse</td>
<td>28.13</td>
<td>30 Eggendart Place</td>
<td>2015-02-20</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="DescModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
<h3 class="modal-title">Job Requirements & Description</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">job title</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="50" id="company-full-name" name="companyFullName">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Company</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="30" id="company-short-name" name="companyShortName">
</div>
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
CSS:
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>
For DEMO : https://jsfiddle.net/dipakthoke07/t53cyutt/42/
Thanks.

unable to make a block responsive using bootstrap

I want to make this responsive on mobile screen
<div class="row well">
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
</div>
view on desktop , this is fine
view on small screen , the design is getting compressed
And i want to show single plot record in a row , not two as shown below
How to make it responsive in small screen?
i am using bootstrap 3 for this

col-xs- is specifically for mobile phones. And making it col-xs-12 will make it take full width.
Update your columns
from
<div class="col-sm-3">
to
<div class="col-xs-12 col-sm-3">