I have an issue I've not been able to find a solution for a long time. Please bear with me if I am not using the correct terminology. I am relatively new to software development and very new to iOS.
Basically I have a list of numbers in an HTML table displayed in a webview and some of them, apparently randomly, are displayed in bold text and allows me to click on them to create an "event" within iOS. This should not be the case. No data should be clickable or generate an even with a press.
I've included a screenshot and a snippet of my html code. Any assistance is greatly appreciated! Thank you!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</button>
<style>
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #DBE8F9;
}
</style>
</head>
<body>
<div data-role="main" class="ui-content">
<form>
<input id="filterTable-input" data-type="search" placeholder="Search For Material...">
</form>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable" data-filter="true" data-input="#filterTable-input">
<thead>
<tr>
<th data-priority="1">Material</th>
<th data-priority="1">lb/ft<sup>³</sup></th>
<th data-priority="1">g/cm<sup>³</sup></th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>Aluminum Hydroxide </td> <!--item in question from screenshot-->
<td>26.5 </td>
<td>0.42</td>
</tr>
<tr>
<td>Aluminum Oxide </td>
<td>36 </td>
<td>0.58</td>
</tr>
<tr>
<td>Aluminum Silicate </td>
<td>31 </td>
<td>0.5</td>
</tr>
<tr>
</tbody>
</table>
</div>
<div data-role="footer" align="center">
Back to Top
</div>
</div>
</body>
That's very odd...
Some quick testing, and it appears that when you adjacent table cells match this format:
dd.mm hh.mm
it is often but not always detected as a date. So,
26.5 0.42 == May 26th
26.10 5.12 == October 26th
If you disable Calendar Event data detection on your WKWebView, those won't be detected. Of course, any actual dates that you want to be detected won't work either.
I haven't been able to find any documentation on the internal parsing code... Probably could find it for Swift, but that wouldn't help much anyway.
Related
I have no experience coding html or css other than the few lessons I did on Code Academy but the company I work at has tasked me with fixing our abandoned cart email. The only way I can fix it is by adjusting the html and css and I am a little lost. I am trying to figure out how to center a button using an older form of css (it was the template provided)
the code that was on the template for the buttons
<table class="row">
<tr>
<th class="column">
<table class="complete-order">
<tr>
<th>
<p>
<a href="{{notification.checkout_link}}" target="_blank">
{{lang 'complete_order'}}
</a>
</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
The solution someone gave in the comments was to use this code below, but I don't think I put it in the right place because it separated the entire email in half... lol.
<table class="complete-order">
<tr>
<td>
<p>
To complete your order right now, just click on link below.
</p>
<p>
Complete Order
</p>
</td>
</tr>
</table>
Could someone please help me center this button?
.complete-order{text-align:center;}
.complete-order a{
background-color:#8cb84a;
border:none;
border-radius:4px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:#fff;
display:inline-block;
font-weight:600;
padding:8px 32px;
text-align:center;
white-space:nowrap;
text-decoration:none;
}
<table class="complete-order">
<tr>
<td>
<p>
To complete your order right now, just click on link below.
</p>
<p>
Complete Order
</p>
</td>
</tr>
</table>
You can centre your table with class row. If there are not other CSS in the head of the email to overwrite this then it should work perfectly.
Change:
<table class="row">
to:
<table align="center" class="row">
I have been trying to get the height of the hr to 0px, any other amount seems to be fine and the two matches. I will also post my code at the bottom. I am not sure if this is a CSS issue or an HTML issue. Any explanation would be greatly appreciated.
Here are two of my hr elements with the CSS code I made with it, yet both look different
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
Before Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
border-width: 2px 0 0 0;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
UPDATE:
I did find a way to get to my goal by deleting the border color and changing the border style for the different sides of the border to none except for one. I got the dotted line I was looking for, but I still would like to understand why exactly my issue came about in the first place? It didn't seem there was any real distinction between the way I set up my first <hr> tag and my second. If someone can clear that up in case the issue occurs with other tags that would be greatly appreciated. Also, I will put code snippets of before and after.
After Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
/* background-color: whitesmoke; */
border-style: dotted none none none;
border-color: grey;
border-width: 5px;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
It's not really different behaviour.
It's behaviour that happens all over webpages whenever the numbers don't line up exactly.
How do you render a 99px image at width: 100px; ?
How many pixels wide is a width: 33.3%;-div in a 100px-container ?
The answer will involve rounding numbers causing them to go a little bit up, or a little bit down. You're seeing the same effect here with the border aligning differently under high pressure.
If instead of your <hr>, it was a roughly 100px by 100px block, then you wouldn't be able to tell when the border was slightly different in different cases.
In your case, in the top example, your bordered <hr> ended up being displayed as a 3 pixel high component, and in the lower example as 2 pixels. I'm guessing that consists of:
1px for the border-top
1px for the border-bottom
either 0px or 1px for the content that is in between the borders (due to rounding up or down).
If I had continued to make hr tags under these high-pressure
conditions, should I expect more variations? i.e. if I added more hr
tags with height 0, would they randomly be between [0,1] pixels?
Saad Satter
No i suspect not. In your case it either rounds up or down, there's not really another outcome.
Things end up being rounded to an integer of whatever the smallest supported (sub)unit is (1 pixel in this case i suppose).
It is possible that, if on top of the height being such a dodgy edge-case (where rounding can make or break it), the width was also such an edge case, then you might potentially have a handful of different possible endresults. A width: 0.5px; height: 0.5px;-type of situation.
For any designer though, you either want to be clear as to what you want (eg: supply whole numbers, not partial pixels), or you want to have conditions in place where either result is fine.
If your website has a content area which contains lots of paragraphs of text, which is width: 1207.5px; then it'll look fine no matter if it ends up being 1207px or 1208px, no-one will be able to tell.
Okay, we know that 0 means nothing. When the value is empty then we use 0. Now, here you are saying in CSS that make the height of hr 0px. That means no value. So, without a single px it can't show anything to you in display. That's why 0px doesn't exist. Hope you got it.
In theory what you are doing is fine, there is theoretically no problem with having a zero height element with borders.
However, CSS pixels do not on many modern screens, map one to one with screen pixels. Several screen pixels may be used for one CSS pixel.
There can therefore be edge effects when the system has to decide exactly where to place things. You can see this sometimes by zooming. In your example try this and you will probably see the unwanted white line come and go at different magnifications.
So in answer to one of your queries, yes it is something to avoid. In your case try setting just the top border at twice the height without the other borders and see what happens.
I am doing a project for my employer, and trying to print a large data table over multiple pages for printing purposes.
When I am trying to print the table however, the top borders seem to overlap onto the previous page.
Image preview:
I have tried editing the borders to be different thicknesses, and applying the CSS properties to now allow a to be split over multiple pages, however none of it has had any effect.
Right now I have removed all CSS from the page apart from Bootstrap and the page break rules, but am still having the same issue
My code:
table {
page-break-inside: auto
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-footer-group
}
<table id="test" class="table table-bordered thead-light">
<thead>
<tr>
<th scope="col">Date / Time</th>
<th scope="col">Log Class</th>
<th scope="col">Reason</th>
<th scope="col">Detail</th>
<th scope="col">Hold State</th>
<th scope="col">UL ID</th>
<th scope="col">SKU</th>
<th scope="col">Location</th>
<th scope="col">Destination</th>
<th scope="col">Qty</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
Table Data
</tbody>
</table>
I would have expected the borders to remain on the page which the starts, and not clip onto the previous page, however as you can see in the original image, it is still clipping.
Any help would really be appreciated.
I cant understand your real issue but i think you are trying to give different border to th, td then add different class to required one and add border css.
Example:
.border-style {
border:2px solid red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td >Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td class="border-style">Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I got your issue but not sure why try to inspect that and do a css display:none; if anything on that border
Cant find the issue because i cant inspect on that
Sorry
And check if anywhere you add a display:inline-block i have a issue with this recently
I had this exact problem and unfortunately I didn't find a proper solution - but read on!
The issue seemed to be that the top border from the table header 'leaked' over to the previous page. After some trial an error I found two workarounds (short of deleting the project entirely).
"Solution" #1 - Remove stylings :'(
Removing all borders AND BACKGROUNDS on the top row (including the table border) meant that the leaking pixels are invisible. Hurrah!
#media print {
table, thead tr, thead th {
/* You might not need '!important' with your styling, but
I found with bootstrap that this is the safest option. */
background: none !important;
border: none !important;
}
}
<table class="table table-bordered">
<thead>
<tr>
<th>Awww...</th>
<th>These</th>
<th>are</th>
<th>boring</th>
<th>headers!</th>
</tr>
</thead>
</table>
But while this fixed my issue, it broke my heart. This wasn't the solution I needed...
"Solution" #2 - Hack at it 'till it breaks!
After some considerable crying, I found that I could add another dummy row above my headers and remove the styling on that instead!
"What a terrible solution - thanks Mark!"
th {
border: solid 1px hotpink;
}
#media not print {
.print-only {
display: none;
}
}
<table class="table table-bordered">
<thead>
<!-- This is where the magic is. This row 'pads' the table
headers and keeps them on the same page -->
<tr class="print-only">
<th style="border: none !important; background: none !important;"></th>
</tr>
<tr>
<th>Look</th>
<th>at</th>
<th>these</th>
<th>stylish</th>
<th>headers!</th>
</tr>
</thead>
</table>
So yeah... when one of you coding geniuses (genii?) come across this answer and realize that the rest of us are down shit's creek, please feel free to post a real solution to this headache :)
I have a Google form that I am trying to force to email me the results in a specific format. It works, but the table I insert has a large blank space above it that I would like to get rid of. For example:
Hello!
I have a purchase request that I would like to submit for review, approval,
and processing. Please see below and attached. Thanks.
Name:
Ryan M
Project Number:
Numbers
Project Comments:
No Comments
Website Link to Product:
Cost:
Purpose of Order:
Test
Document Upload:
https://drive.google.com/file/d//view
Date Required By:
2017-01-13
Confirmed Lead Time:
teeeeeest
Here is the Code I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top:0px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Name:</b></td>
<td>{{Name}}</td>
</tr>
<tr>
<td><b>Project Number:</b></td>
<td>{{Project Number}}</td>
</tr>
<tr>
<td><b>Project Comments:</b></td>
<td>{{Project Comments}}</td>
</tr>
<tr>
<td><b>Website Link to Product:</b></td>
<td>{{Website Link to Product}}</td>
</tr>
<tr>
<td><b>Cost:</b></td>
<td>{{Cost}}</td>
</tr>
<tr>
<td><b>Purpose of Order:</b></td>
<td>{{Purpose of Order}}</td>
</tr>
<tr>
<td><b>Document Upload:</b></td>
<td>https://drive.google.com/file/d/{{Document Upload}}/view</td>
</tr>
<tr>
<td><b>Date Required By:</b></td>
<td>{{Date Required By}}</td>
</tr>
<tr>
<td><b>Confirmed Lead Time:</b></td>
<td>{{Confirmed Lead Time}}</td>
</tr>
</table>
</body>
</html>
Any clues would be a great help. Thanks!
HTML emails can be viewed in various different tools and none of them (outlook) support it the same way (CSS markup included).
The way the output looks make me think that the table is not expanding to 100%. Notice how the table cells are stacked. This could be symptomatic of your real problem, the viewport.
You might start by setting the <html> and <body> width to 100%. Try both CSS and the in-line style markup.
<body width="100%">
I'd stay away from any HTML5 options like <meta name="viewport" content="initial-scale=1, width=device-width"> since you can't guarantee support in email applications.
The CSS markup might not be an option so you could try putting it all inline.
Hope this helps.
I have this:
<html>
<head>
<link rel="icon" type="image/ico" href="../images/logo.ico" />
<title> About Dideban </title>
</head>
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12; margin-left:130; margin-bottom:200">
<tr>
<td >
<br>
<b> txt </b> txt txt
<br>
txttxttxttxttxttxt
<br>
txttxttxttxttxt
<br>
txttxttxt
<br>
txttxttxttxttxttxttxttxt
<b> Snort </b>.
<br><br>
<b> Dideban Team </b>
<li> <font color="blue"> Manager: </font> Dr. Masood Hashemi</li>
<li> <font color="blue"> Designer&Developer:</font>txttxt</li>
<li> <font color="blue"> Supporter:</font>txttxt</li>
<li> <font color="blue"> Developer:</font> txttxt</li>
<li> <font color="blue"> Designer:</font> txttxttxt</li>
<br>
<!--<input class="but" type="button" value="close" onclick="window.close();" style="margin-top:200">-->
</td>
</tr>
</table>
</body>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</html>
My problem is that when I see it the table is in the center and bottom of my above image
I want the table be in the left hand but when i tried align="left"
in the table tag nothing changed what can i do?
in my linux system it shows me right but in XP it is not fixed.
Thanks In advance.
Try to insert your "header" table in the body tag. The formating works only for tables that are within it. The head tag is not for your web page header. It's a header for a web browser to provide information about your page and etc - more
That should work:
<html>
<head />
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12px; margin-left:130px; margin-bottom:200px">
<tr>
<td >
<br>
<b> Sometext </b> Sometext
</td>
</tr>
</table>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</body>
</html>
I don't understand anything after this edits. Everything looks fine. Remember that you have margin-left:130 in your content table. This is why it is not glued to the left side of the page. Was that the case?
The problems you are having with the browsers rendering your page differently are caused by errors in your code. The markup is not correct and the browsers have a hard time guessing what you actually want them to do.
Some of the problems with your code include:
<li> tags with no <ul> or <ol> parent
invalid style declarations: values should also include the measure units ( margin-left:130px; )
Instead of copying and pasting different solutions found over the internet, you should take your time and learn the basics of HTML. There are many tutorials on the web that are actually outdated by today's standards (the font tag is deprecated in HTML4 and should be replaced with CSS styles) so you should be careful in the resources you read.
This is a great resource for learning about HTML and it's relatives (CSS and JS):
https://developer.mozilla.org/en-US/learn
You can also use this validate your code:
http://validator.w3.org/
If you don't take your time to learn the proper way of coding webpages, you will have no luck finding developers willing to help you.