Xidel keeps adding XMLNS in the output - linux

I am trying to extract html code from a div:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="tbParams">
<table class="ParametrList" style="border-collapse: collapse; width: 100%;">
<tr class="Parametr altrow">
<td class="Nazev">
Hello </td>
<td class="Hodnota" style="vertical-align: top;">
</td>
</tr>
</table>
</div>
</body>
</html>
...with xidel:
xidel input.html -e '//div[#id="tbParams"]' --output-format html
For some reason it keeps adding XMLNS attributes to the output:
<div xmlns="http://www.w3.org/1999/xhtml" id="tbParams">
<table class="ParametrList" style="border-collapse: collapse; width: 100%;">
<tbody xmlns=""><tr xmlns="http://www.w3.org/1999/xhtml" class="Parametr altrow">
<td class="Nazev">
Hello </td>
<td class="Hodnota" style="vertical-align: top;">
</td>
</tr>
</tbody></table>
</div>
If I remove xmlns="http://www.w3.org/1999/xhtml" from the <html> tag, then it is OK.

Related

NodeJS Server pdf Document Generation Issue

I am working on an API which generates a pdf document based on an EJS template which then gets emailed to some users. When running Locally everything works as expected however when my API is pushed to heroku the pdf is generated with some odd formatting errors. Its like the page is essentially cut down the middle vertically.
Does anyone know a possible cause of this?
I am using ejs, and html-pdf
Here is the code and template
document generation function
ejs.renderFile(path.join(__dirname, '../views/', "offer.ejs"), {offerData}, (err, data) => {
if(err)
reject(err)
else
{
const options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "10mm"
},
"footer": {
"height": "10mm",
}
};
//creates the actual pdf doc for sending
pdf.create(data, options).toFile(`./offer_${inqID}.pdf`, function(err, res) {
if (err)
reject(err)
else
resolve(res.filename)
});
}
});
html pdf template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trade-in Disclosure Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<style>
body{
font-family: 'Roboto', sans-serif !important;
}
h1{
text-decoration: underline !important;
}
table.center {
margin-left:auto;
margin-right:auto;
}
td.rows{
padding-bottom: 10px;
text-align: left !important;
}
td.question{
padding-right: 15px;
}
span{
font-weight:bold !important;
}
</style>
</head>
<body style="border: solid black 2px; margin-left: 10px; margin-right:10px;">
<header class="text-center">
<h1 >The Auto Broker</h1>
<h2> Trade-In Vehicle Disclosure Form</h2>
<p style="margin-left: 6em; margin-right: 6em">
This Form has been filled out by the customer requesting a quote. It contains some basic details to help inform your evaluation of the vehicle.
If the customer provides false information you have the right to recind or adjust your offer to the customer; otherwise include the value of
this vehicle in your total value for the quote. Please ensure to carefully review all the data before providing a quote. Quotes are final and
cannot be altered once submitted.
</p>
</header>
<div style="padding-top:20px;">
<div class="form-container container">
<div class="row" style="background-color: black;">
<h3 style="color: aliceblue;" class="ml-2"> Vehicle History</h3>
</div>
<table class="center">
<thead>
<tr>
<th style="padding-bottom: 20px;"> <h4>Question </h4></th>
<th style="padding-bottom: 20px;"> <h4>Response </h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows question">Has the Vehicle been in an accident?</td>
<td class="rows"> <%= questionnaire.inaccident %> </td>
</tr>
<tr>
<td class="rows question">Have any panels been repainted, repaired <br> or replaced?</td>
<td class="rows"> <%= questionnaire.panelrepairs %> </td>
</tr>
<tr>
<td class="rows question">Are you the original owner?</td>
<td class="rows"> <%= questionnaire.originalowner %> </td>
</tr>
<tr>
<td class="rows question">Is this an American Vehicle?</td>
<td class="rows"> <%= questionnaire.usvehicle %> </td>
</tr>
<tr>
<td class="rows question">Has the Vehicle been registered in any other <br> Province/State?</td>
<td class="rows"> <%= questionnaire.outofprovreg %> </td>
</tr>
<tr>
<td class="rows question">Is the Odometer faulty, replaced or rolled back? </td>
<td class="rows"> <%= questionnaire.faultyodometer %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any lights on the dashboard?</td>
<td class="rows"> <%= questionnaire.dashlights %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any factory warranty?</td>
<td class="rows"> <%= questionnaire.factorywarranty %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have extended warranty?</td>
<td class="rows"> <%= questionnaire.extwarrenty %> </td>
</tr>
<tr>
<td class="rows question">Was the vehicle ever used as a daily rental, <br> police vehicle, or taxi/limousine?</td>
<td class="rows">
<% if (questionnaire.rental) { %>
Rental <br>
<% } %>
<% if (questionnaire.taxilimo) { %>
Taxi / Limo <br>
<% } %>
<% if (questionnaire.policecar){ %>
Police Vehicle <br>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Does the vehicle require repairs to the following: <br>
<span style="margin-left: 10px;">Engine </span> <br>
<span style="margin-left: 10px;">Transmission/Powertrain</span> <br>
<span style="margin-left: 10px;">Electrical System </span> <br>
<span style="margin-left: 10px;">Air Conditioning System</span>
</td>
<td class="rows">
<%= questionnaire.enginerepair %> <br>
<%= questionnaire.transrepair %> <br>
<%= questionnaire.electricalrepair %> <br>
<%= questionnaire.acrepairs %> <br>
</td>
</tr>
<tr>
<td class="rows question">Additional Repair Details</td>
<td class="rows"> <%= questionnaire.repairdetails %> </td>
</tr>
<tr>
<td class="rows question">Outstanding Balance</td>
<td class="rows">
<% if (questionnaire.outstandingbalance){ %>
<%= questionnaire.outstandingbalance %>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Total Current Milage</td>
<td class="rows"> <%= questionnaire.milage %> K.M </td>
</tr>
<tr>
<td class="rows question">V.I.N</td>
<td class="rows"> <%= questionnaire.vin %> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Proper Img
Broken Img

Was able to solve this issue by adding a single CSS style Rule.
html {
zoom: 0.55;
}
This is most likely required due to the default zoom setting of the html-pdf package. This setting and more can also be configured with options; however, i am unsure if the zoom options can be configured to < 1.

I'm facing the same prblm. I think u have to use inline CSS... u can't use bootstrap. I was facing the same problem. but now it is ok with puppeteer

Layout for table using Bootstrap 4.2 not aligning as expected

In the process of moving from Bootstrap 3 to Bootstrap 4.2. I have a table inside a Ajax modal screen. Here is the code snippet:
<div class="card-body">
<div class="row">
<table class="table table-hover table-responsive-lg">
<thead>
<tr>
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
In my system the columns showing QTY is too small to see the full number, even the number 1.
UPDATE
I changed the headers to col-sm-4 and the results are much the same. Here is an image of the outcome:
UPDATE 2
Suggested adding ROW class to the <tr> results in:

You can try adding class="row" to each tr instead of to the outside div
Example:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div style="width: 572px;">
<div class="card-body">
<div class="">
<table class="table table-hover table-responsive-lg">
<thead>
<tr class="row">
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3 text-center "><asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

I wanted to close this out with a solution that worked for me. It was simple to fix. In the <thead> section of the table I removed the col-sm-3 tag and the table behaved as expected.
Thanks everyone!

why does the Gmail app on iPhone ignore media queries?

I'm putting together an email newsletter for a client, and find that more or less every email client and app provides a more or less readable experience (they still need some work) - except for the Gmail app. Once the breakpoint is reached, it should be displaying as one column. But it does not.
I'm not sure why this is. Is there a way to force the app to display the newsletter in desktop mode shrunken down to fit the screen width? Or is there a way to target Gmail with a conditional so that the content will obey the media query?
Related: the litmus tests I've ran don't look anything at all like the result I'm getting on my iPhone. Why is that?
http://codepen.io/sabaeus/pen/ZGQWdZ?editors=100
This is in my document head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>Title</title>
</head>
And then this is in my body:
<body>
<!-- background table start -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="background_table">
<tbody>
<tr>
<td>
<!-- end of background table start -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="display:inline-block;" width="100%"><img src="http://placehold.it/197x41" style="display:block;"></td>
</tr>
<tr>
<td width="100%" height="20"> </td>
</tr>
<tr>
<td width="100%" height="100">
<img src="http://placehold.it/699x400" style="display:block;">
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- hello/quick links -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="393" class="column" style="height:100%;display:inline-block;margin-right:53px">Hello,
<br>
<br> Intro text
</td>
<td width="230" class="column" style="height:100%;padding:20px;">
<span class="h1">Quick Links</span>
<br>
<br>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>Link 1</strong></span>
<br> Info for link 1
<br>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>Link 2</strong></span>
<br>Link
<br>
<br>
<span style="display:inline-block; padding-bottom:5px;"><strong>Link 3</strong></span>
<br>Link
</td>
</tr>
</tbody>
</table>
<!-- hello/quick links -->
<!-- marketing communications -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td>
<span class="h1">Headline 1</a>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="148" class="column-img" style="height:100%;display:inline-block;margin-right:17px">
<img src="http://placehold.it/148x111" style="display:block;">
</td>
<td width="503" class="column-text-1" style="padding:20px"><span style="font-size:18px;display:inline-block; padding-bottom:5px;"><strong>Sub head</strong></span>
<br>Info info info info info info info info info info info</td>
</tr>
</tbody>
</table>
<!-- marketing communications -->
<!-- new print collateral -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Headline 2</span>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="148" class="column-img" style="height:100%;display:inline-block;margin-right:17px"><img src="http://placehold.it/148x220" style="display:block;"></td>
<td width="503" class="column-text-1" style="padding:20px"><span style="font-size:18px;display:inline-block; padding-bottom:5px;"><strong>Sub head</strong></span>
<br> info info info info</td>
</tr>
</tbody>
</table>
<!-- new print collateral -->
<!-- advertising -->
<!-- brand ads -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1" style="display:inline-block;">Headline 3</span>
<br>
<span style="font-size:18px;">
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="padding-top:0px;">
<span style="font-size:18px;"><strong>Sub head</strong></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="350" class="column" style="height:100%;margin-right:131px"><img src="http://placehold.it/246x264" style="min-width:350px; display:block;"></td>
<td style="height:100%;" width="350" class="column">
<img src="http://www.placehold.it/267x324" style="min-width:350px; display:block;"></td>
</tr>
</tbody>
</table>
<!-- brand ads -->
<!-- community ads -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td style="padding-top:30px;padding-bottom:0px;">
<span style="font-size:18px;"><strong>Sub head</strong></span>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="350" class="column" style="height:100%;margin-right:131px">
<img src="http://placehold.it/197x320" style="min-width:350px; display:block">
<table>
<tbody>
<tr>
<td>
info info info info
</td>
</tr>
</tbody>
</table>
</td>
<td style="height:100%;" width="350" class="column"><img src="http://placehold.it/212x328" style="min-width:350px;display:block">
<table>
<tbody>
<tr>
<td style="padding-top:10px">
<br> info info info info info
</td>
</tr>
</tbody>
</table>
</td>
</td>
</tr>
</tbody>
</table>
<!-- community ads -->
<!-- advertising -->
<!-- talent acquisition -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Headline 4</span>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<!-- <tr>
<td width="100%" height="10"> </td>
</tr>
-->
<tr>
<td width="100%" height="100">
<a href="#" target="_blank">
<img src="http://placehold.it/668x195" style="width:100%;display:block;"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- text -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
</tr>
<tr>
<td width="100%" height="100">
<span style="font-size:18px;display:inline-block; padding-bottom:5px;"><strong>Sub head</strong></span>
<br>Info info info
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- text -->
<!-- talent acquisition -->
<!-- new expert advice -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Headline 5</span>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td>
<span style="display:inline-block;">Info info info</span>
</td>
</tr>
</tbody>
</table>
<!-- 0 -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;margin-right:46px"><img src="http://placehold.it/345x281" style="width:100%;display:block;"></td>
<td width="322" class="column" style="padding:20px;">
<span style="display:inline-block; padding-bottom:5px;"><strong>info info</strong></span>
<br>info info info</td>
</tr>
</tbody>
</table>
<!-- 0 -->
<!-- 1 -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;margin-right:46px"><img src="http://placehold.it/345x281" style="width:100%;display:block;"></td>
<td width="322" class="column" style="padding:20px;">
<span style="display:inline-block; padding-bottom:5px;"><strong>info info</strong></span>
<br>info info info</td>
</tr>
</tbody>
</table>
<!-- 1 -->
<!-- 2 -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;margin-right:46px"><img src="http://placehold.it/345x281" style="width:100%;display:block;"></td>
<td width="322" class="column" style="padding:20px">
<span style="display:inline-block; padding-bottom:5px;"><strong>info info</strong><span>
<br>
info info info</td>
</tr>
</tbody>
</table>
<!-- 2 -->
<!-- 3 -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" class="column" style="height:100%;display:inline-block;margin-right:46px"><img src="http://placehold.it/345x281" style="width:100%;display:block;"></td>
<td width="322" class="column" style="padding:20px;">
<span style="display:inline-block; padding-bottom:5px;"><strong>info info</strong></span>
<br>info info info
</td>
</tr>
</tbody>
</table>
<!-- 3 -->
<!-- new expert advice -->
<!-- epic speaker videos -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Headline 6</span>
</td>
</tr>
</tbody>
</table>
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="345" style="height:100%;display:inline-block;margin-right:17px;" class="column"><img src="http://placehold.it/258x154" style="width:100%;display:block;"></td>
<td width="423" class="column" style="padding:20px;">info info info info info</td>
</tr>
</tbody>
</table>
<!-- epic speaker videos -->
<!-- upcoming events -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td class="top-buffer">
<span class="h1">Headline 7</span>
</td>
</tr>
</tbody>
</table>
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<!-- <tr>
<td width="100%" height="10"> </td>
</tr>
-->
<tr>
<td width="100%" height="100">
<span style="font-size:17px"><strong>
May is: Physical Fitness Month / Jewish American Heritage Month</strong></span>
<table>
<tbody>
<tr>
<td>
<ul style="line-height: 150%; width: 582px;">
<li style="list-style-type:none; padding-left:10px;background-color:#ededed">May 10th - <span style="font-weight:300">Mother’s Day</span> </li>
<li style="list-style-type:none;padding-left:10px;">May 25th - <span style="font-weight:300">Memorial Day</span> </li>
<li style="list-style-type:none; padding-left:10px; background-color:#ededed">June 6th - <span style="font-weight:300">D-Day</span></li>
<li style="list-style-type:none;padding-left:10px;">June 14th - <span style="font-weight:300">Flag Day</span></li>
<li style="list-style-type:none; padding-left:10px; background-color:#ededed">June 21st - <span style="font-weight:300">Father’s Day</span></li>
<li style="list-style-type:none;padding-left:10px;">June 21st - <span style="font-weight:300">Alzheimer’s Association Longest day (click below for details)</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- alzheimer's -->
<table width="699" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="10"> </td>
</tr>
<tr>
<td width="100%" height="100">
<img src="http://placehold.it/454x174" style="width:100%;display:block;">
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- alzheimer's -->
<!-- prior -->
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%" height="10"> </td>
</tr>
<tr>
<td width="100%" height="100" style="padding:20px;">
<span style="display:inline-block;padding-bottom:5px">
Info info info
</span>
</td>
</tr>
<tr>
<td width="100%" height="10"> </td>
</tr>
</tbody>
</table>
<!-- prior-->
<!-- upcoming events -->
<!-- footer -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of footer -->
<!-- end of background table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700);
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
#background_table {
margin: 0;
padding: 0;
width: 100%!important;
line-height: 100%!important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
display: block;
}
table td {
border-collapse: collapse;
vertical-align: middle;
font-family: 'Open Sans', Trebuchet, sans-serif;
font-size: 17px;
line-height:120%;
color: #000;
}
table td[class="column"] {
height: 100px;
width: 393px;
padding: 15px;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table[class="body_table"] {
width: 699px;
margin-top: 21px;
}
table span[class="h1"] {
font-weight:300;
font-size:35px;
color:#ff9001;
}
table td[class="top-buffer"] {
padding-top: 25px;
}
#media only screen and (max-width: 640px) {
table[class="body_table"] {
width: 600px!important;
}
table td[class="column"] {
width: 100%!important;
display: block!important;
}
table span[class="h1"] {
line-height:110%!important;
font-size:23px!important;
}
*[class="mob-hide"] { display: none !important }
}

Gmail app and Gmail web service strips all class and ID styling out of your style tags. More Info Here
There is an option for some elemental styling in Gmail web service as seen in link above, but other than that you need to do everything inline. This removes the capabilities of responsive design as you cannot inline media queries.
Your best bet is fluid design(percentage based to fit small or large screen) or a mobile first hybrid design that is essentially designed first for Gmail/Outlook and then uses media queries and style tags to make it work for all other email clients.

Scala find location of string in a string

I have this string:
var htmlString;
Assigned to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Payment Receipt</title>
<link rel="stylesheet" type="text/css" href="content/PaymentForm.css">
<style type="text/css">
</style>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
</head>
<body>
<div id="divPageOuter" class="PageOuter">
<div id="divPage" class="Page">
<!--[1]-->
<div id="divThankYou">
Thank you for your order!
</div>
<hr class="HrTop">
<div id="divReceiptMsg">
You may print this receipt page for your records.
</div>
<div class="SectionBar">
Order Information
</div>
<table id="tablePaymentDetails1Rcpt">
<tr>
<td class="LabelColInfo1R">
Merchant:
</td>
<td class="DataColInfo1R">
<!--Merchant.val-->
Ryan
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo1R">
Description:
</td>
<td class="DataColInfo1R">
<!--x_description.val-->
Rasmussenpayment
<!--end-->
</td>
</tr>
</table>
<table id="tablePaymentDetails2Rcpt" cellspacing="0" cellpadding="0">
<tr>
<td id="tdPaymentDetails2Rcpt1">
<table>
<tr>
<td class="LabelColInfo1R">
Date/Time:
</td>
<td class="DataColInfo1R">
<!--Date/Time.val-->
09-Jul-2012 12:26:46 PM PT
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo1R">
Customer ID:
</td>
<td class="DataColInfo1R">
<!--x_cust_id.val-->
<!--end-->
</td>
</tr>
</table>
</td>
<td id="tdPaymentDetails2Rcpt2">
<table>
<tr>
<td class="LabelColInfo1R">
Invoice Number:
</td>
<td class="DataColInfo1R">
<!--x_invoice_num.val-->
176966244
<!--end-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr id="hrBillingShippingBefore">
<table id="tableBillingShipping">
<tr>
<td id="tdBillingInformation">
<div class="Label">
Billing Information
</div>
<div id="divBillingInformation">
Test14 Rasmussen<br>
1234 test st<br>
San Diego, CA 92107 <br>
</div>
</td>
<td id="tdShippingInformation">
<div class="Label">
Shipping Information
</div>
<div id="divShippingInformation">
</div>
</td>
</tr>
</table>
<hr id="hrBillingShippingAfter">
<div id="divOrderDetailsBottomR">
<table id="tableOrderDetailsBottom">
<tr>
<td class="LabelColTotal">
Total:
</td>
<td class="DescrColTotal">
</td>
<td class="DataColTotal">
<!--x_amount.val-->
US $250.00
<!--end-->
</td>
</tr>
</table>
<!-- tableOrderDetailsBottom -->
</div>
<div id="divOrderDetailsBottomSpacerR">
</div>
<div class="SectionBar">
Visa ****0027
</div>
<table class="PaymentSectionTable" cellspacing="0" cellpadding="0">
<tr>
<td class="PaymentSection1">
<table>
<tr>
<td class="LabelColInfo2R">
Date/Time:
</td>
<td class="DataColInfo2R">
<!--Date/Time.1.val-->
09-Jul-2012 12:26:46 PM PT
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Transaction ID:
</td>
<td class="DataColInfo2R">
<!--Transaction ID.1.val-->
2173493354
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Authorization Code:
</td>
<td class="DataColInfo2R">
<!--x_auth_code.1.val-->
07I3DH
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Payment Method:
</td>
<td class="DataColInfo2R">
<!--x_method.1.val-->
Visa ****0027
<!--end-->
</td>
</tr>
</table>
</td>
<td class="PaymentSection2">
<table>
</table>
</td>
</tr>
</table>
<div class="PaymentSectionSpacer">
</div>
</div>
<!-- entire BODY -->
</div>
<div class="PageAfter">
</div>
</body>
</html>
And I want to find the location of "x_auth_code.1.val" in the string. And then I want to obtain a string from the location plus a certain number of characters. The goal would be to return the Authorization code.

You can use indexOfSlice, and then slice() in StringOps
scala> val myString = "Hello World!"
myString: java.lang.String = Hello World!
scala> val index = myString.indexOfSlice("Wo")
index: Int = 6
scala> val slice = myString.slice(index, index+5)
slice: String = World
With your html string:
scala> htmlString.indexOfSlice("x_auth_code.1.val")
res4: Int = 2771

Why aren't you using an XML parser? Don't treat XML as strings -- you'll get bitten if you do.
Here's a regex to do it, but my advice is: DO NOT USE IT! Use xml tools.
"""\Qx_auth_code.1.val\E[^>]*>([^<]*)""".r.findFirstMatchIn(htmlString).map(_ group 1)

Links suddenly stop reacting after migrating MyFaces 1.2 to 2.1

I recently switched my Eclipse Indigo project from JSF 1.2 to JSF 2.1 (using MyFaces). Using Tomcat 7.
Strange thing happens: I set up a project, and it works fine for some short
time, and then suddenly (maybe after I do "clean") stops working in a sense that
clicking a command link does not produce any action, backing bean's method is not
called, just nothing happens. I have tried to do project "clean" and Eclipse
restart, and even system restart but it did not help. Only thing that helped is
that I created a brand new workspace, and new project - but same thing happened:
this too worked only for short time and suddenly stoped working in the same way
- command links are just not reacting to clicks, and there is no way I can debug Java
code to at least localize the problem.
What could be the reason for such a strange behaviour?
Thanks in advance.
Update: this is the JavaScript error reported:
myfaces is not defined
onclick()onclick (line 2)
event = click clientX=840, clientY=252
return myfaces.oam.submitForm("j_id_6", "j_id_6:LOGIN");
function onclick(event) {
return myfaces.oam.submitForm("j_id_6", "j_id_6:LOGIN");
}
Here is the original XHTML file:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://myfaces.apache.org/tomahawk">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Login</title>
</h:head>
<body style="background-color:#3d3d3d;" text="#000000" link="#cc0000" alink="#666666" vlink="#cc0000" onload="document.forms[0].USERNAME.focus();">
<f:view>
<h:form target="_top">
<table border="0" align="center" width="810" style="border: 2px black solid; background-image:url(images/header.jpg); margin:auto;" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
<table align="center" width="810" style="border: 2px black solid; background-color:#ffffff;" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10" colspan="3" align="center" valign="middle">
</td>
</tr>
<tr>
<td colspan="3">
<table width="778" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="778"><h1>Login</h1>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20"><font class="text">User Name: </font></td>
<td height="20"><font class="text"><t:inputText forceId="true" id="USERNAME" maxlength="50" value="#{LoginBean.username}" size="26" /></font></td>
</tr>
<tr>
<td height="20"><font class="text">Password: </font></td>
<td height="20"><font class="text"><h:inputSecret maxlength="30" value="#{LoginBean.password}" size="26" /></font></td>
</tr>
<tr>
<td height="20" colspan="2" align="right"><h:commandLink id="LOGIN" action="#{LoginBean.doLogin}"><h:graphicImage style="border: none" value="images/login.png" /></h:commandLink></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>
Here is the generated HTML:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Login</title></head>
<body style="background-color:#3d3d3d;" text="#000000" link="#cc0000" alink="#666666" vlink="#cc0000" onload="document.forms[0].USERNAME.focus();"><form id="j_id2030916047_790d5181" name="j_id2030916047_790d5181" method="post" action="/EWC/login.faces" enctype="application/x-www-form-urlencoded" target="_top">
<table border="0" align="center" width="810" style="border: 2px black solid; background-image:url(images/header.jpg); margin:auto;" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
<table align="center" width="810" style="border: 2px black solid; background-color:#ffffff;" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10" colspan="3" align="center" valign="middle">
</td>
</tr>
<tr>
<td colspan="3">
<table width="778" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="778"><h1>Login</h1>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20"><font class="text">User Name: </font></td>
<td height="20"><font class="text"><input id="USERNAME" name="USERNAME" type="text" value="" maxlength="50" size="26" /></font></td>
</tr>
<tr>
<td height="20"><font class="text">Password: </font></td>
<td height="20"><font class="text"><input type="password" name="j_id2030916047_790d5181:j_id2030916047_790d51ba" maxlength="30" size="26" /></font></td>
</tr>
<tr>
<td height="20" colspan="2" align="right"><script type="text/javascript" src="/EWC/javax.faces.resource/oamSubmit.js.faces?ln=org.apache.myfaces"></script><img src="images/login.png" style="border: none" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><input type="hidden" name="j_id2030916047_790d5181_SUBMIT" value="1" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="5s3ZqoVcUIwarcQb6pVzFIPhMJIzbVHnjMrXdtgA1Nten7grU/y0hMGbHtFvIExuKQOwB3IGzcSDeuPfijYMcnK23q/2N1mduMdr6RskySGELSaI2w93nL9b8NE=" /></form>
</body>
</html>

<context-param>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
add it in ur Web.xml
everything will start.

Resources