I'm trying to paste an entire HTML snippet directly into an email client through the clipboard as rich text (type: "text/html). I'm copying the HTML through JavaScript as so:
function copyToClipboard(html) {
function listener(e) {
e.clipboardData.setData("text/html", html);
e.preventDefault();
}
document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);
}
My HTML contains a tag which only contains media queries, all other styles are inlined. When I paste the HTML into gmail (or any email client for that matter), the tag is nowhere to be seen.
I've tried:
- Placing the tag in the tag
- Placing the tag at the start of the tag
- Placing the tag at the end of the tag
- Only pasting the contents of the tag
Here's some example HTML that's passed to the above function:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
@media screen and (max-width: 500px){.responsive-table .responsive-cell{width:100% !important;display:block;}}
@media screen and (max-width: 500px){.responsive-table{min-height:50px !important;}}
@media screen and (max-width: 500px){.content-container{width:100% !important;}}
@media screen and (max-width: 500px){.media-type{width:100% !important;}}
</style>
</head>
<body style="margin: 0 !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; width: 100% !important;" data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<table data-is-wrapper="1" data-type="wrapper" cellspacing="0" id="ij5t" style="box-sizing: border-box; background-color: #FAFAFA; height: 100%; width: 100%;" width="100%" height="100%" bgcolor="#FAFAFA">
<tbody data-is-tbody="1" data-type="tbody" style="box-sizing: border-box;">
<tr data-is-row="1" data-type="row" id="if2m" style="box-sizing: border-box; height: 100%;">
<td data-is-wrapper-cell="1" data-type="wrapper-cell" cellspacing="0" id="it3i" style="box-sizing: border-box; height: 100%;" height="100%">
<table data-is-content="1" data-type="content" class="content-container" cellspacing="0" id="ixol" style="box-sizing: border-box; background-color: #d2edf2; border-color: #FFFFFF; font-family: Helvetica, sans-serif; margin-left: auto; margin-right: auto; height: 100%; min-width: min(600px, 100%); min-height: 100%; max-width: max(800px, 100%); max-height: none; vertical-align: top; width: 80%;" width="80%" height="100%" bgcolor="#d2edf2" valign="top">
<tbody data-is-tbody="1" data-type="tbody" style="box-sizing: border-box;">
<tr data-is-row="1" data-type="row" style="box-sizing: border-box;">
<td data-type="content-container" data-is-content-container="1" id="ijji" style="box-sizing: border-box; background: none; width: 100%; margin: 0; padding: 0; height: 100%; min-height: 100%; max-height: none; vertical-align: top;" width="100%" height="100%" valign="top">
<table data-is-table="1" data-type="table" cellspacing="1" id="id5h" style="box-sizing: border-box; padding: 6px; margin: 0px; width: 100%; vertical-align: middle; height: auto; font-family: Helvetica, sans-serif; background-repeat: no-repeat; background-size: cover; background-position: center; border-color: #000000; opacity: 100%; rows: 2; columns: 2; cell-border-width: 0px; cell-border-color: #242424; cell-border-radius: 0px; cell-background-color: #FFFFFF; cell-spacing: 1;" width="100%" valign="middle">
<tbody>
<tr data-is-row="1" data-type="row" id="is0no" style="box-sizing: border-box; border-width: 0px; border-style: solid; border-radius: 0px; background-color: #FFFFFF; border-color: #242424;" bgcolor="#FFFFFF">
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="ildv9" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: auto;">
<p data-type="text" id="i8tvo" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 16px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
</td>
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="i0v4x" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: auto;">
<p data-type="text" id="ibme2" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 16px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
</td>
</tr>
<tr data-is-row="1" data-type="row" id="iehnz" style="box-sizing: border-box; border-width: 0px; border-style: solid; border-radius: 0px; background-color: #FFFFFF; border-color: #242424;" bgcolor="#FFFFFF">
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="iuuql" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: auto;">
<p data-type="text" id="if5kw" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 16px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
</td>
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="id9mf" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: auto;">
<p data-type="text" id="il04k" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 16px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
</td>
</tr>
</tbody>
</table>
<table data-is-section="1" data-type="section" cellspacing="0" class="responsive-table" id="iyizi" style="box-sizing: border-box; padding: 6px; margin: 0px; width: 100%; min-height: 150px; vertical-align: middle; height: auto; font-family: Helvetica, sans-serif; background-repeat: no-repeat; background-size: cover; background-position: center; border-color: #FFFFFF; opacity: 100%;" width="100%" valign="middle">
<tbody>
<tr data-is-row="1" data-type="row" style="box-sizing: border-box;">
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="iw7n4" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: 50%;" width="50%">
<p data-type="text" id="iwrxc" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 39px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
<p data-type="text" id="iwpk2" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 39px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
<p data-type="text" id="iohuh" style="color: #242424; display: block; padding: 10px; margin: 0; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; letter-spacing: normal; font-size: 39px; font-weight: normal; line-height: 20px; font-family: Helvetica, sans-serif; text-align: left; opacity: 100%; border-color: #FFFFFF;">Insert your text here</p>
</td>
<td data-is-cell="1" data-type="cell" class="responsive-cell" id="i1sdg" style="box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0px; min-width: 10px; padding: 5px; width: 50%;" width="50%"><img data-is-image="1" data-type="image" id="id4ek" src="https://images.unsplash.com/photo-1615789591457-74a63395c990?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmVhdXRpZnVsJTIwY2F0fGVufDB8fDB8fA%3D%3D&w=1000&q=80" width="640" height="640" class="media-type" style="box-sizing: border-box; width: 100%; --mobile-width: 100%; max-width: 100%; display: block; height: auto; border-color: #FFFFFF;"></td>
</tr>
</tbody>
</table>
<a data-is-button="1" data-type="button" class="content-button" id="irgro" style="box-sizing: border-box; background-color: #274E8C; border-radius: 30px; color: #FFFFFF; padding: 15px; font-size: 16px; letter-spacing: normal; line-height: 20px; margin: 0 auto 0 auto; width: 30%; white-space: break-spaces; vertical-align: middle; text-align: center; display: block; font-family: Helvetica, sans-serif; opacity: 100%; border-color: #FFFFFF;">Click me</a><a data-is-button="1" data-type="button" class="content-button" id="iuivh" style="box-sizing: border-box; background-color: #274E8C; border-radius: 30px; color: #FFFFFF; padding: 15px; font-size: 16px; letter-spacing: normal; line-height: 20px; margin: 0 auto 0 auto; width: 30%; white-space: break-spaces; vertical-align: middle; text-align: center; display: block; font-family: Helvetica, sans-serif; opacity: 100%; border-color: #FFFFFF;">Click me</a><a data-is-button="1" data-type="button" class="content-button" id="ioxva" style="box-sizing: border-box; background-color: #274E8C; border-radius: 30px; color: #FFFFFF; padding: 15px; font-size: 16px; letter-spacing: normal; line-height: 20px; margin: 0 auto 0 auto; width: 30%; white-space: break-spaces; vertical-align: middle; text-align: center; display: block; font-family: Helvetica, sans-serif; opacity: 100%; border-color: #FFFFFF;">Click me</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
@media screen and (max-width: 500px) {
.responsive-table .responsive-cell {
width: 100% !important;
display: block;
}
.responsive-table {
min-height: 50px !important;
}
.content-container {
width: 100% !important;
}
.media-type {
width: 100% !important;
}
}
</style>
</body>
<html>Is it possible to paste tags with media queries into the mailing client as rich text? Please let me know if it's not possible or if there's something I'm doing incorrectly. The HTML itself is rendered fine. It's just that it's not responsive due to the missing tag.