I'm using dompdf to generate pdf formatted receipts which than be printed using RP327 80mm Thermal Receipt Printer. But printed receipts are not fitting the paper properly. Here is an attached image of printed receipts pos receipt.
Here is my html table which is converted to a pdf file
<?php
ob_clean();
$dompdf = new DOMPDF();
$dompdf->set_option('default_font', 'Courier');
$customPaper = array(0,0,340,650);
//$dompdf->set_paper($customPaper);
$dompdf->set_option('enable_css_float',true);
//$dompdf->set_paper("A3", "portrait");
$html =' <html>
<head><style>
.table { display: table; width: 100%; border-collapse: collapse; }
.table-row { display: table-row; }
.table-cell { display: table-cell; border: 1px solid black; padding: 1em; }
}
span { display: block; }
#page table {
size: 340px 650px;
margin: 0px;;
}
.table {
page: table;
page-break-after: always;
font-size: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row"><div class="table-cell" colspan="3" style="text-align: center"><img src="../../img/top-logo.png"></div></div>
<div class="table-row">
<div class="table-cell" ><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" >Delivery Date:</div><br>
<div class="" style="border-bottom: 1px solid #000000"> '.$parceldetails['r_delivery_time'].' at '.$parceldetails['bytime'].'</div>
<div class="">Agent:</div><br>
<div class=""> '.$parceldetails['name'].' </div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3" style="text-align: center"> <b style="font-size: larger">'.$ecr.'</b></div>
</div>
<div class="table-row">
<div class="table-cell" colspan="1"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center"><b> '.$parceldetails['paymentmethod'].' </b></div>
<div class="" style="text-align: center"><b> '.$parceldetails['product_price'].' BDT </b></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" style="text-align: center"> '.genarateQRCode($data).' </div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> Delivered </div>
<div class="" style="text-align: center; min-height:63px"> Cancel </div>
</div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> </div>
<div class="" style="text-align: center; min-height:63px""></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3">
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:10px">Agent signature</b>
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:50px">Receiver signature</b></div>
</div>
</div>';
$html .='<table class="table">
<tr>
<td colspan="3"><img src="../../img/top-logo.png"></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></td>
<td>D. Date<span>'.$parceldetails['r_delivery_time'].'</span></td>
</tr>
<tr>
<td>Agent<span>'.$parceldetails['name'].'</span></td>
</tr>
<tr>
<td colspan="3">'.$ecr.'</td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></td>
<td><b>'.$parceldetails['paymentmethod'].'</b></td>
</tr>
<tr>
<td><b>'.$parceldetails['product_price'].' BDT</b></td>
</tr>
<tr>
<td rowspan="2" colspan="1">'.genarateQRCode($data).'</td>
<td>Delivered</td>
<td></td>
</tr>
<tr>
<td>Cancel</td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">Agent Signature Receiver Signature</td>
</tr>
</table>
</body>
</html>';
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("dompdf_out.pdf", array('Attachment' => 0));
<?>
According to the linked printer specs the printer is capable of printing to a width of either 72mm or 64mm. That translates to roughly 204pt and 181pt (respectively). Rather than relying on a larger paper size and limiting your content width I'd try to work within the constraints you have.
You should also keep in mind that dompdf translates pixel-based measurements into the appropriate point size based on the DPI specified for your document. If you want a one-to-one correspondence between your HTML document and the rendered PDF you should set the Dompdf DPI to 72 since the PDF PPI is fixed at 72.
With that in mind here's my advice. I'm assuming you're using Dompdf 0.6.x based on the method calls.
Set your paper size appropriately. Let's assume you have the 72mm width paper.
$dompdf->set_paper(array(0,0,204,650));
Set your DPI
$dompdf->set_option('dpi', 72);
If you're going to use a table for layout then you should just go ahead and use table elements. Styling DIVs with table display types will just cause them to be treated like table elements. What you have will work fine, but it will be clearer to you what's going on if you just use table elements.
Know that Dompdf be a bit quirky in relation to tables. One thing to keep in mind is that Dompdf won't allow table cells to be smaller than the contained content (for normally flowed content).
It's hard to give any input on why the printer is cutting off the content. I'd suggest cleaning up your code. I just noticed that you have the same content twice, once as DIVs styled to be table elements and a second time as an actual table.
It seems that this is a problem about drivers, you can solve this problem on official webiste: https://posguy.pro/en/support
Related
I am learning how to convert HTML files to PDF using iText7 pdfHTML. So far, I've been able to generate nice PDFs, but now I'm struggling to try to add both a header and a footer to all PDF pages. These header and footer are generated from HTML markup, and they are slightly complex (i.e. some images, tables, or divs, not just plain text). The source HTML is generated by my own code, so I have sort of control over the content of the source files.
I have read the iText book, in particular the chapter about converting HTML to PDF with pdfHTML. Indeed, I could add headers using the #page CSS rules and setting up the MediaDeviceDescription(MediaType.PRINT) to the converter properties. This is the HTML that I'm using for testing:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
#bottom-center {
content: element(footer);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
</head>
<body>
<div style="width: 100%; border: 1px dashed black;">
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/>
<div style="background-color: yellow; width: 100%; height: 1200px"> </div>
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/></p>
</div>
<div id="footer">
<table style="width: 100%; font-size: 12px; line-height: 1;">
<tbody>
<tr>
<td style="text-align: right; width: 50%; padding: 0;">ACME Inc.</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;"> </td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">CIF: 12345678Z</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">https://acme.inc</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">C/Rue del Percebe, 13</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Tel.: +44 555 123 123</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">45321 Virginia</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Fax: +44 555 321 321</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">Virginia - USA</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">info#acme.inc</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see, I'm trying to place the div#footer element at the bottom (center) of all PDF pages. However, despite the fact that both the left and right texts are placed on all page footers, the #footer element only is shown on the last one, and it doesn't fully fit on the page.
This is the code I'm using to generate the PDF from the HTML:
public MemoryStream CreatePdf()
{
MemoryStream pdfStream = new MemoryStream();
float marginTop = 20, marginRight = 20, marginBottom = 20, marginLeft = 20;
ConverterProperties converterProps = new ConverterProperties();
converterProps.SetMediaDeviceDescription(new MediaDeviceDescription(MediaType.PRINT));
WriterProperties writerProps = new WriterProperties();
if (Options != null)
{
foreach (var option in Options)
{
switch (option.Key)
{
case "baseUri":
converterProps.SetBaseUri(option.Value);
break;
case "createAcroForm":
converterProps.SetCreateAcroForm(Boolean.Parse(option.Value));
break;
case "compressLevel":
writerProps.SetCompressionLevel(int.Parse(option.Value));
break;
case "compressFullPdf":
writerProps.SetFullCompressionMode(Boolean.Parse(option.Value));
break;
case "marginTop":
marginTop = float.Parse(option.Value);
break;
case "marginRight":
marginRight = float.Parse(option.Value);
break;
case "marginBottom":
marginBottom = float.Parse(option.Value);
break;
case "marginLeft":
marginLeft = float.Parse(option.Value);
break;
}
}
}
Body.Seek(0, SeekOrigin.Begin);
PdfWriter writer = new PdfWriter(pdfStream, writerProps);
PdfDocument pdf = new PdfDocument(writer);
HtmlConverter.ConvertToPdf(Body, pdf, converterProps);
pdf.Close();
return pdfStream;
}
You can see the result following this link: https://rapidshare.io/2gFK/footer.png
Can I pick your brains to help me out here?
Regards,
To make sure your footer element is visible on all pages, just add it as the first element inside of the <body> tag. This rule should be followed for all running elements.
The footer element does not fully fit because it uses default page margins and this element needs a bit bigger height. Since pdfHTML does not calculate necessary margins automatically (which another iText produdct, iText DITO does), you need to specify them manually with margin-bottom CSS property.
Fixed HTML that works well:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
#bottom-center {
content: element(footer);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
margin-bottom: 80pt;
}
</style>
</head>
<body>
<div id="footer">
<table style="width: 100%; font-size: 12px; line-height: 1;">
<tbody>
<tr>
<td style="text-align: right; width: 50%; padding: 0;">ACME Inc.</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;"> </td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">CIF: 12345678Z</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">https://acme.inc</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">C/Rue del Percebe, 13</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Tel.: +44 555 123 123</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">45321 Virginia</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Fax: +44 555 321 321</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">Virginia - USA</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">info#acme.inc</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; border: 1px dashed black;">
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/>
<div style="background-color: yellow; width: 100%; height: 1200px"> </div>
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/></p>
</div>
</body>
</html>
Visual result:
Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>
.img-wraper {
text-align: left;
}
.img-wraper img {
display: inline-block;
}
#media (max-width: 1024px) {
.img-wraper {
text-align: center;
}
}
<table style="width: 100%;">
<tbody>
<tr>
<td style="background-color: #663399;">
<div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
</td>
</tr>
</tbody>
</table>
I'm using ruby and selenium to test a web page, with the two buttons below
<div class="AVdis">
<span class="gwt-InlineHTML"/>
<a class="AVcur" name="attendEdit"; font-size: 12px;">[edit]</a>
</div>
<div class="lineHeight">
<button type="button" class="pcbtn" style="display: inline-block;">yes</button>
</div>
I've tried to use
driver.find_elements(:class, 'AVcur').click
driver.find_elements(:class, 'pcbtn').click
but it doesn't work, please advise.
Thanks
updated the full HTML code(the part code of class 'pcbtn' ONLY, it doesn't include the part with class 'AVcur'.):
<body>
<iframe src="javascript:'';" id="__gwt_historyFrame" style="width: 0px; height: 0px; border: 0px; display: block;"/>
<iframe src="javascript:''" id="Attend" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none;"/>
<div style="display: none;"/>
<div class="GFKFO5SBPF hBody nClientFalse">
<div class="left" style="width: 198px;">
<div class="contents nClientFalse2">
<div class="AVright">
<div class="GFKFO5SBIQ">
<div class="AVfirstTd">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div>
<table cellpadding="0" cellspacing="0" class="pcattd_record" width="630px">
<tbody>
<tr class="GFKFO5SBCS">
<tr class="GFKFO5SBCS">
<th>
<td>
<table class="noborder">
<tbody>
<tr>
<td>
<td>
<div class="lineHeight">
<button type="button" class="pcbtn" style="display: inline-block;">press button</button>
Try to click it, using xpath:
driver.find_element(:xpath, "//div[#class='AVdis']//a[#name='attendEdit']").click
Second element xpath:
driver.find_element(:xpath, "//div[#class='lineHeight']//button[#class='pcbtn'][text()='yes']").click
Click an element:
driver.find_element(css: 'a').click
I have an HTML email that has a creates a mobile version by using {display:none!important;} and has a media query that reveals it using {display:block!important;}.
When forwarded in Outlook, the email breaks and displays both images leaving a huge gap on the right side next to the mobile image.
Has anyone found a coding solution that would maintain the appearance when forwarded?
HTML
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="vanish">
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<a href="#" style="color: #999; text-decoration: none;">
<img src="Desktop.jpg" width="205" height="171" alt="" class="deviceWidth" style="display: block; background-color: #343434;" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End One Column -->
<!-- Houdini Start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="display: none; visibility: none; width: 0px; height: 0px;" class="houdini">
<a href="#" style="color: #999; text-decoration: none;">
<img style="display: none; visibility: hidden; width: 0px; height: 0px; border: 0px;" src="Mobile.jpg" alt="" class="houdini" /></a>
</td>
</tr>
</table>
<!-- Houdini End -->
I need to click on the textbox next to username . Am unable to find the Xpath for this using webdriver...can I get some help?
here is the html snippet:
<div id="form-1013-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="padding: 0px; height: 108px; left: 0px; top: 0px; width: 376px;">
<span id="form-1013-outerCt" style="display: table; height: 100%;">
<div id="form-1013-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;padding:5px 5px 5px 5px">
<table id="textfield-1014" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item x-form-invalid" cellpadding="0" style="table-layout: auto;">
<tbody>
<tr id="textfield-1014-inputRow">
<td id="textfield-1014-labelCell" class="x-field-label-cell" width="205" valign="top" halign="right" style="">
<label id="textfield-1014-labelEl" class="x-form-item-label x-unselectable x-form-item-label-right" unselectable="on" style="width:200px;margin-right:5px;" for="textfield-1014-inputEl">Username:</label>
</td>
<td id="textfield-1014-bodyEl" class="x-form-item-body " role="presentation" colspan="1">
<input id="textfield-1014-inputEl" class="x-form-field x-form-required-field x-form-text x-form-invalid-field" type="text" autocomplete="off" name="username" aria-invalid="true">
</td>
<td id="textfield-1014-sideErrorCell" width="17" valign="middle" style="">
<div id="textfield-1014-errorEl" class="x-form-error-msg x-form-invalid-icon" style="" data-errorqtip="<ul class="x-list-plain"><li>This field is required</li></ul>">
<ul class="x-list-plain">
<li>This field is required</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<table id="textfield-1015" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: auto;">
</div>
</span>
Try replacing your code
List<WebElement> elements = driver.findElements(By.tagName("input"));
with this one:
List<WebElement> elements = driver.findElements(By.xpath("//input"));
Check this cool cheat sheet for further selections
http://www.simple-talk.com/content/file.ashx?file=4937