So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.
The problem is that, I don't know how many pages would there be. there could be any number of pages.
I need to show watermark behind every page.
These images are taken from Google Chrome's print mode.
This is the page's html. you needn't go through it. the only point here is that there is a div that i know occurs two times. I used that in javascript to repeat the watermark.
<div class="content-box pad25A" style="page-break-after: always;">
<div class="row" style="min-height:1000px">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />
</div>
</div>
<div class="col-xs-5">
<center>
<div class="row">
<div class="col-xs-12">
<div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
</div>
<div class="col-xs-12">
<center>
<div style="font-size:14px;font-weight:bold;">TigerIncenseRAATradersCompany#gmail.com</div>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
</div>
</div>
</center>
</div>
<div class="col-xs-4 float-right text-right">
<h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
<div class="divider"></div>
<div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Client information:</h2>
<ul class="reset-ul">
<li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
<li><b>Address:</b><span> Peshawar</span></li>
<li><b>Phone:</b><span> 03319090057</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Info:</h2>
<ul class="reset-ul">
<li><b>Date:</b><span> 20 April 2018</span></li>
<li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Details:</h2>
<p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
</div>
</div>
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th class="text-center">Per Piece</th>
<th>Price Per Piece</th>
<th>Price Per Carton</th>
<th>Carton Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick for Mosquito</td>
<td class="text-center">48</td>
<td>Rs : 100</td>
<td>Rs : 4800</td>
<td>125</td>
<td>Rs : <span class="RowTotal">600000</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>20</td>
<td>Rs : <span class="RowTotal">86400</span></td>
</tr>
<tr>
<td>2</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>28</td>
<td>Rs : <span class="RowTotal">120960</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
</tbody>
</table>
<center>
<div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
</center>
</div>
<br />
<div class="row Signature">
<div class="col-xs-5">
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Per Piece</th>
<th>Carton</th>
</tr>
</thead>
<tbody>
<tr>
<td>China Incense Stick </td>
<td>240 </td>
<td>48</td>
</tr>
<tr>
<td>China Incense Stick for Mosquito</td>
<td>48 </td>
<td>125</td>
</tr>
<tr>
<td>Crystal</td>
<td>70 </td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<span style="font-size:16px;font-weight:bold">
NET TOTAL.
<span class="TotalAmount">1154150</span>
</span>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<center>
<span style="font-size:16px;font-weight:bold">
<span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
</span>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="row Signature">
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Reciever Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>GM. Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Proprietor Signature</b>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content-box pad25A" style="page-break-after: always;">
<center>
<p style="font-size:20px;font-weight:bold">About Our Company</p>
</center>
<div id="row">
<div class="col-xs-12">
<table class="table table-responsive">
<tr>
<td><p style="font-size:16px;font-weight:bold">1</p></td>
<td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">2</p></td>
<td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment redolence</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">3</p></td>
<td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">4</p></td>
<td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
</tr>
</table>
</div>
</div>
</div>
The last page is hardcoded so i have added a watermark behind it by using javascript and repeating content through it.
This is how i am repeating the "Tiger incense" watermark for now
$(function () {
$(".content-box").each(function () {
$(this).after('<div class="watermark">TIGER INSENCE</div>');
});
});
this is the watermark's css
.watermark {
position: fixed;
opacity: 0.2;
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
font-size: 130px;
margin-top: -700px;
margin-left: -50px;
white-space: nowrap;
}
What i want is to repeat the watermark for each page there would be. using javascript or css or any javascript library that would help.Also Page size would always be A4.
I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.
I used SVG for simplicity, you can easily replace with an image.
body {
min-height: 300vh;
position: relative;
margin: 0;
}
body:before {
content: "";
position: absolute;
z-index: 9999;
inset: 0;
background:
url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>')
0 0/100% 100vh;
}
take watermark as background image
<style type="text/css" media="print">
.content-box
{
background-image:url('watermarkimage.png');
background-repeat:repeat-y;
background-position: center;
background-attachment:fixed;
background-size:100%;
}
</style>
Related
I want to copy my HTML table elements to the clipboard. But I have used div tag inside the td tag of the table. I think that what adding a new line after pasting the contents from clipboard. I want that to stay in the same line. Please help how to make it possible.
Sample Output
ProfileUID : 12345
First Name : John
Email : John.doe#xyz.com
Profile Status : Enabled
Country Code : United States (+1)
Phone No. :
+1- 456789125
Last Generated OTP : x5xx555
Employee ID : 223344
User ID : johndoe
Required Output
ProfileUID : 12345
First Name : John
Email : John.doe#xyz.com
Profile Status : Enabled
Country Code : United States (+1)
Phone No. : +1- 456789125
Last Generated OTP : x5xx555
Employee ID : 223344
User ID : johndoe
Have a look at the Phone No. texts in both the above outputs.
index.html
<div style="margin-left: 2rem">
<button class="btn btn-primary" type="button" style="background-color: #001872; display: none" onclick="copyTable(document.getElementById('table'))" id="copy"> <i class="fa-regular fa-copy"></i> </button>
</div>
<table class="table table-striped table-hover" style="display: none" id="table">
<tbody>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">ProfileUID :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">First Name :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Email :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Profile Status :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Country Code :</th>
<td style="width: 50%"></td>
</tr>
<tr>
<th style="width: 20%" class="col-sm-4 text-center" scope="row" style="padding-top: 12px;"> Phone No. :</th>
<form action="" method="post" id="form2" style="display: inline-block;"> {% csrf_token %}
<td style="width: 50%">
<div style="display: flex; justify-content: space-between;">
<div style="width: 25%;" id="1"></div>
<div style="width:100%; border: 0px solid red; align-self: center; text-align: center;" id="2"></div>
<div style="border: 0px solid blue; width: 25%; text-align: right">
<button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872;" onclick="edits()"><i class="fa-solid fa-square-pen fa-2x"></i> </button>
<button type="submit" id="save" style="display:none; border-style: none; background-color:transparent; color:#17d647e8; padding: 2px;" onclick="saved()"><i class="fa-solid fa-square-check fa-2x"></i></button>
<button type="button" id="cancel" style="display:none; border-style: none; background-color:transparent; color:#c42c2c;"><i class="fa-solid fa-square-xmark fa-2x" onclick="canceled()"></i></button>
</div>
</td>
</form>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">Employee ID :</th>
<td style="width: 50%"></td>
</tr>
<tr align="center">
<th style="width: 20%" class="col-sm-4 text-center" scope="row">User ID :</th>
<td style="width: 50%"></td>
</tr>
</tbody>
</table>
script.js
function copyTable(el) {
var body = document.body,
range,
sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
document.execCommand("Copy");
}
I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.
Following is the code,
<div layout="column" layout-align="center stretch" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container flex>
<table md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
Now, I have a horizontal scroll at the bottom, I also want to have it at the top.
This link provides a solution here but I don't want to have a JS related code for scrolling.
Any help is much appreciated.
Unforunately, there is no way without javascript to have both a scrollbar on top and at the bottom.
It is possible to have a scroll bar on top with css, but that is still only one scrollbar:
md-table-container{
width: 100%;
overflow: scroll;
display: block;
transform: rotate(180deg) scaleX(-1);
}
table{
transform: rotate(180deg) scaleX(-1);
}
The only way to go is to use javascript. And the easiest way to implement it is to use the jQuery Doublescroll plugin
Download the file and include it as ds.js in your html. Here is a full example:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
$('#the-table').doubleScroll();
});
</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
<table style="width:100%" md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
I have a Table in the left menu which is having the Scroll bar and i have a Tooltip for each row inside a table. My requirement is to show Tooltip on Top of the Scrollbar towards right, but some how i am unable to achieve that.
Problem is Tooltip appearing behind the Scrollbar and body. I need to show it on top of the Scrollbar towards right.
I have a Position "Relative" for Parent Div and "Absolute" for Child element. Z-index also seems not working here.
HTML:
<div class="ResultsWrapper">
<table class="ResultsTable">
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
</table>
</div>
CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 40px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
z-index: 40;
}
Please check the below Fiddle.
Full Example In Fiddle
Appreciate your Help.
I think you can use a wrapper class (.TooltipWrapper in the HTML) like the following way:
document.querySelectorAll('.SerialNumber').forEach(function(el){
el.addEventListener('mousemove',function(ele){
var x = ele.pageY;
el.parentNode.querySelector('.TooltipWrapper').style.top = `${x}px`;
});
});
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.TooltipWrapper {
position: absolute;
visibility: hidden;
}
.hasTooltip:hover .TooltipWrapper {
visibility: visible;
opacity: 1;
}
.SerialNumberTooltip {
display: block;
--margin-top: -20px;
margin-left: 85px;
background-color: #FFF;
border: 1px solid #CCC;
}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815207</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815207</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815208</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815208</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815209</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815209</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815210</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815210</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815211</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815211</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815212</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815212</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815213</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815213</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815214</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815214</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815215</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815215</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815216</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815216</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815217</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815217</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815218</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815218</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815219</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815219</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815220</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815220</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815221</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815221</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815222</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815222</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815223</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815223</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815224</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815224</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815225</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815225</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815226</div>
<div class="TooltipWrapper">
<div class="SerialNumberTooltip">3119985815226</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This is the workaround:
1. Change html structure:
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
Using pseudo elements to target attribute of div .(adding before after css)
remove position:relative on which the tooltip was depending.
Removed top and left attribute as they depend on position relative and replace with margin .
Below is the fixed code:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumberContainer {
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumber:hover::before {
position: absolute;
content:attr(data-before-content);
margin:10px 0 0 50px;
background-color: #fff;
border: 1px solid #CCC;
display: block;
z-index:9999;
}
.SerialNumber:hover{}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="aaaaaaa3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr><tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You cannot position an element over the scrollbar using Position absolute and z-index.
If you want to show element on top of the scrollbar then you need to use position fixed element.
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-y:scroll;
border:1px solid black;
z-index:-1;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: fixed;
top: 10px;
left: 70px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
z-index:99999999999;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
z-index: 40;
}
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Check the below jsfiddle.
http://jsfiddle.net/rajeevRF/eoc8yv5a/5/
The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view.
I had declared nowrap text in css and even td and th but its not working.
How can I solve this wraptext error?
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
table {
width: 100%;
white-space: nowrap;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}
I think this is what you wanted. I removed all the nowrap code, as you didn't need it to achieve the responsive layout.
The key here is to give the tables parent element position:relative;, float:left; and a width width:100%; so the table's width:100%; has a meaning. (100% of what?).
You also don't need to give every column a width. It's enough to provide widths for one row and the rest of the table will use those rules.
There was a <div> inside the table which I removed to above the table.
Here is the code: (run the snippet)
Note: the borders on the th are there just to show the width of each. I also changed the width of the widest column from 18% to 14% and gave the 4% to the last two columns (2% each).
.table-responsive
{
position:relative;
float:left;
width:100%;
}
table
{
width: 100%;
}
th
{
color:grey;
border:1px solid #000;
}
td
{
text-align:right;
}
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<table class="table table-bordered mbn">
<tr>
<th style="width:8%;">Enq</th>
<th style="width:8%;">Da</th>
<th style="width:10%;">Bu</th>
<th style="width:10%;">Prop</th>
<th style="width:14%;">Pr</th>
<th style="width:10%;">District</th>
<th style="width:10%;">City</th>
<th style="width:10%;">Bedrooms</th>
<th style="width:10%;">Details</th>
<th style="width:10%;">Update</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Det</td>
<td>ed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Please Use this code
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
Please use below code
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<thead>
<tr>
<th style="width:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
<th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
<th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
<th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey">Update</font></th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;">Det </a></td>
<td style="width:8%;white-space:nowrap;"> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>
The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.