learning asp.net and came to a problem i can not solve yet, any help would be appreciated.
Here is the screen shot of how it is now:
enter image description here
and that how i want it to be on the web:
enter image description here
This is my table on Index page
#{
ViewBag.Title = "Главная страница";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table>
#foreach (var b in ViewBag.Events)
{
<tr>
<td style=" padding: 8px;"><p><h2>#b.Date</h2></p></td>
<td style=" padding: 8px;"><p><h2>#b.Time</h2></p></td>
</tr>
}
<tr>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Title</h3></p></>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Place</h3></p></td>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Lecturer</h3></p></td>
</tr>
#foreach (var b in ViewBag.Events)
{
<tr style="padding: 80px;">
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee;"><p><h4>#b.Title</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Location</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Responsible</h4></p></td>
</tr>
}
</table>
Add Event
Home controller
using PhClub.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PhClub.Controllers
{
public class HomeController : Controller
{
EventsContext db = new EventsContext();
public ActionResult Index()
{
IEnumerable<Event> events = db.Events;
ViewBag.Events = events;
return View();
}
[HttpGet]
public ActionResult CreateEvent()
{
return View();
}
[HttpPost]
public ActionResult CreateEvent(AddEvent addEvent)
{
db.AddEvents.Add(addEvent);
db.SaveChanges();
return View();
}
}
}
And second question - at the moment, when i add new event to Db with hardcoded ID it is not being populated with method above - any advise of where im going wrong?
Here is the table for event input i use,
<body>
<div>
<h3>Form of event creation</h3>
<form method="post" action="">
#*<input type="hidden" value="#ViewBag.AddEventId" name="AddEventId" />*#
<table>
<tr>
<td><p>Enter Id of event :</p></td>
<td><input type="text" name="AddEventId" /> </td>
</tr>
<tr>
<td><p>Enter title :</p></td>
<td><input type="text" name="Title" /> </td>
</tr>
<tr>
<td><p>Date:</p></td>
<td><input type="text" name="Date" /> </td>
</tr>
<tr>
<td><p>Time :</p></td>
<td><input type="text" name="Time" /> </td>
</tr>
<tr>
<td><p>Address :</p></td>
<td>
<input type="text" name="Location" />
</td>
<tr>
<td><p>Lecturer:</p></td>
<td><input type="text" name="Responsible" /> </td>
</tr>
<tr><td><input type="submit" value="Send" /> </td><td></td></tr>
</table>
</form>
</div>
</body>
Your current structure has two adjacent loops:
#foreach (var b in ViewBag.Events)
{
[some output]
}
[more output]
#foreach (var b in ViewBag.Events)
{
[even more output]
}
So you're looping over the events twice, effectively building two different sections of table divided by that output in the middle. It looks like you want just one loop, where each iteration of the loop has a couple rows of table output. Something structured more like this:
#foreach (var b in ViewBag.Events)
{
[some output]
[more output]
[even more output]
}
This is untested of course, but perhaps in your code it would look like this:
#foreach (var b in ViewBag.Events)
{
<tr>
<td style=" padding: 8px;"><p><h2>#b.Date</h2></p></td>
<td style=" padding: 8px;"><p><h2>#b.Time</h2></p></td>
</tr>
<tr>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Title</h3></p></>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Place</h3></p></td>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Lecturer</h3></p></td>
</tr>
<tr style="padding: 80px;">
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee;"><p><h4>#b.Title</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Location</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Responsible</h4></p></td>
</tr>
}
Basically, just loop over the records once and build the output you want for each record.
(For your second question, you may want to open a new Stack Overflow question. To avoid confusion and keep things concise it's generally best to ask one question at a time.)
Related
So, I have this HTML, read programmatically from an email message:
<div style="width: 100% !important; line-height: 1.6em; font-size: 14px; background-color: rgb(246, 246, 246); padding-top: 20px" class="container">
<table style="background-color: rgb(246, 246, 246); width: 600px; margin: 0 auto !important">
<tbody>
<tr>
<td>
<br />
</td>
<td class="templateColumns" style="display: block !important; width: 600px !important; margin: 0 auto !important; clear: both !important">
<div style="margin: 0 auto; display: block">
<table cellspacing="0" cellpadding="0" width="100%" style="background-color: rgb(255, 255, 255)">
<tbody>
<tr>
<td style="font-size: 16px; font-weight: 500; padding: 20px; line-height: 18px; background-color: rgb(255, 255, 255)">
<img src="cid:zs_branding.jpg" id="ztb-logo-rebrand" style="max-height: 50px" height="50"></img>
<br />
</td>
</tr>
<tr>
<td>
<table style="background-color: rgb(81, 210, 182)" cellspacing="0" cellpadding="10" align="center" width="100%">
<tbody>
<tr>
<td class="header-row" style="color: rgb(255, 255, 255); font-size: 16px; font-family: Helvetica, Arial, Sans Serif; border: none; background-color: rgb(81, 210, 182); padding: 20px; height: 28px">
<div class="sign-mail-header" style="text-align: left; float: left; line-height: normal; padding: 0px 0 0 10px; display: inline-block; font-size: 24px; width: 100%">
<span class="font" style="font-family: arial, helvetica, sans-serif, sans-serif">
<b>Digital Signature Request</b>
</span>
<br />
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 25px 40px 0px 40px">
<br />
<table style="padding-bottom: 20px" cellspacing="0" cellpadding="0" width="100%">
<tbody style="font-size: 14px; color: rgb(68, 68, 68); line-height: 20px">
<tr>
<td class="message-row" style="padding: 0px 0px 20px; font-size: 14px; width: 154px">
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<span>
<span class="font" style="font-family: arial, helvetica, sans-serif, sans-serif">
<span class="size" style="font-size: 16px">SMD has requested you to review and sign the Member agreement.</span>
</span>
</span>
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<span>
<span class="font" style="font-family: arial, helvetica, sans-serif, sans-serif">
<span class="size" style="font-size: 16px">
<b>Organization Name</b> SMD
</span>
</span>
</span>
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<span>
<span class="font" style="font-family: arial, helvetica, sans-serif, sans-serif">
<span class="size" style="font-size: 16px">
<b>Expires on</b> Sep 12, 2022
</span>
</span>
</span>
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<br />
</div>
<div style="word-wrap: break-word; width: 100%; float: left" class="sign-mail-message">
<span>
<span class="font" style="font-family: arial, helvetica, sans-serif, sans-serif">
<span class="size" style="font-size: 16px">
<b>Message to all </b> We have sent you the contract for your review and signature. Please sign the same to proceed further
<br />Thank You
<br /> SMD Team.
</span>
</span>
</span>
<br />
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 0 20px">
<table width="100%">
<tbody>
<tr>
<td style="padding-top: 15px" align="center">
<div>
<table>
<tbody>
<tr>
<td class="button-row" style="font-size: 15px; color: rgb(255, 255, 255); background-color: rgb(232, 78, 88); text-align: center; text-decoration: none; border-radius: 2px; display: inline-block; min-height: 38px" align="center">
<a target="_blank" rel="noopener noreferrer" style="font-size: 18px; color: rgb(255, 255, 255); text-align: center; text-decoration: none; border-radius: 3px; display: inline-block; padding: 0px 30px; float: left" href="https://sign-up-link.example.com?id=[blah]" class="sign-mail-btn-link">
<div class="sign-mail-btn-text" style="line-height: 38px; font-size: 18px">Start Signing
<br />
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<br />
</td>
</tr>
</tbody>
</table>
<div class="disclaimer-container" style="background-color: rgb(246, 246, 246); width: 600px; padding: 10px 0px 20px 0px; margin: 0 auto">This is an automated email from Zoho Sign. For any queries regarding this email, please contact the sender helpdesk#SMD.com directly. If you think this email is inappropriate or spam, you may file a complaint with Zoho Sign
<a style="margin: 0;padding: 0;" href="https://www.zoho.com/report-abuse/" target="_blank">here</a>.
</div>
</div>
<div>
<br />
</div>
The third-party plugin I was using, would only let me access it as plain string.
So, I have converted it to a GPathResult via new XmlSlurper().parseText(this.GetNewMessage(folderName)) . Now what?
The sign-up link I need, I know I could access it via this xpath selector //a[.//div[#class = 'sign-mail-btn-text']] if this HTML were in my actual browser....
....but how do I go about using that xpath on my GPathResult?
You can not use xpath in XmlSluprer you have to use gpath.
For your example, you can do something like this:
def html = '''<div>
<table>
<tbody>
<tr>
<td class="button-row" style="font-size: 15px; color: rgb(255, 255, 255); background-color: rgb(232, 78, 88); text-align: center; text-decoration: none; border-radius: 2px; display: inline-block; min-height: 38px" align="center">
<a target="_blank" rel="noopener noreferrer" style="font-size: 18px; color: rgb(255, 255, 255); text-align: center; text-decoration: none; border-radius: 3px; display: inline-block; padding: 0px 30px;
float: left" href="https://sign-up-link.example.com?id=[blah]" class="sign-mail-btn-link">
<div class="sign-mail-btn-text" style="line-height: 38px; font-size: 18px">Start Signing
<br />
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>'''
def gpath = new XmlSlurper().parseText(html)
/* //a -> find all <a> everywhere: in gpath it's a findAll over '**' */
def resultList = gpath.'**'.findAll {
if(it.name() == 'a'){
/* //a.//div[#class = 'sign-mail-btn-text']
Check if <a> elements founded contains at least one <div> which has a specific attribute value:
In gpath could be; find over '**' checking name and attribute value.
if it founds an element, then the condition is true and <a> could be returned.
*/
return it.'**'.find { elem ->
println elem.name()
elem.name() == 'div' && elem.'#class' == 'sign-mail-btn-text'
} != null
}
return false;
}
// you can check the xml structure using XmlUtil.serialize
XmlUtil.serialize(resultList[0])
#albciff answered my original question, but I decided to go a different direction. This may interest those of you that want to use full-blown XPath to get your results.
Also, I realized that I could go one step further with the XPath and get the actual URL. Here's what I came up with:
import javax.xml.parsers.DocumentBuilderFactory
import javax.xml.xpath.XPathFactory
import org.w3c.dom.Element
import com.kms.katalon.core.model.FailureHandling
import com.testwithhari.katalon.plugins.Gmail
public final class SMDEmailUtils {
// ... email util methods and static flags here...
// ... more email util methods here...
/**
* **NOTE**: forked from https://stackoverflow.com/a/2269464/2027839 , and then refactored
*
* Processes HTML, using XPath
*
* #param html
* #param xpath
* #return the result
*/
public static String ProcessHTML(String html, String xpath) {
final String properHTML = this.ToProperHTML(html);
final Element document = DocumentBuilderFactory.newInstance()
.newDocumentBuilder()
.parse(new ByteArrayInputStream( properHTML.bytes ))
.documentElement;
return XPathFactory.newInstance()
.newXPath()
.evaluate( xpath, document );
}
private static String ToProperHTML(String html) {
// SOURCE: https://stackoverflow.com/a/19125599/2027839
String properHTML = html.replaceAll( "(&(?!amp;))", "&" );
if (properHTML.contains('<!DOCTYPE html'))
return properHTML;
return """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
${properHTML}
</body>
</html>
""";
}
}
Then, in my use case, another method on the class, I pass that html in like:
public static String ExtractSignUpLink() {
final String folderName = this.GetNewMessageFolderName(30, FailureHandling.STOP_ON_FAILURE);
return this.ProcessHTML(this.GetNewMessage(folderName), "//a[.//div[#class = 'sign-mail-btn-text']]/#href");
}
and it works!
I am using twig to display all the submitted data of a form in PDF Attachment field. After writing the twig code,
the form's title and the submission ID would not go away and mess up the template, and I do not even have them on twig.
the date and the p tag are not printed properly despite my code works fine in editor
Can anyone tell me why and how to fix the problem?
<style>
.wrap {
text-align: center;
}
#signature {
display: inline-table;
border-collapse: collapse;
table-layout: auto;
border: 1px solid rgba(5, 138, 222, 0.67);
empty-cells: show;
margin: 1%;
table-layout: auto;
}
#sign {
border: 1px solid rgba(5, 138, 222, 0.67);
padding: 10px;
}
th {
background-color: rgba(143, 220, 242, 0.67);
border: 1px solid rgba(5, 138, 222, 0.67);
border-left: 1px solid rgba(5, 138, 222, 0.67);
border-bottom: 1px solid rgba(5, 138, 222, 0.67);
color: #000000;
text-align: center;
font-weight: bold;
vertical-align: middle;
padding: .75em .5em;
}
td {
text-align: right;
border: 1px solid rgba(5, 138, 222, 0.67);
vertical-align: middle;
padding: .75em .5em;
}
#item {
border-collapse: collapse;
border: 1px solid rgba(5, 138, 222, 0.67);
empty-cells: show;
margin: 1%;
table-layout: auto;
width: 100%;
}
p {
font-weight: bold;
}
</style>
<body>
<h1 style="float: right;">Date: <u>[webform_submission:values:date_]</u></h1>
<table id="item">
<tr>
<th colspan="5">Expense Item</th>
</tr>
<tr>
<th>Service Purchased</th>
<th>Purpose</th>
<th>Receipt</th>
<th>Account Code</th>
<th>Amount</th>
</tr>
{% for item in data.voucher %}
<tr>
<td>{{item.date}}</td>
<td>{{item.purpose}}</td>
<td><input type="checkbox"></td>
<td>{{ item.acct_num }}</td>
<td>{{'$ ' ~ item.amount}}</td>
</tr>
{% endfor %}
</table>
<br>
<h3 align="right">Total Petty Cash: <u>[webform_submission:values:petty_cash_voucher_01_total_petty_cash]</u></h3>
<br>
<div class="wrap">
<table id="signature" width="150">
<tr>
<th id="sign">Purchased/Received By:</th>
</tr>
<tr>
<td id="sign" height="100"></td>
</tr>
</table>
<table id="signature" width="150">
<tr>
<th id="sign">Approved By:</th>
</tr>
<tr>
<td id="sign" height="100"></td>
</tr>
</table>
<table id="signature" width="150">
<tr id="sign">
<th id="sign">Acct.Approval:</th>
</tr>
<tr>
<td height="100" id="sign"></td>
</tr>
</table>
</div>
<div>
<p>Must be approved per Authorized List.</p>
<p>Receipts, including detailed receipts, should be attached to form.</p>
</div>
</body>
In your site, go to Webform -> configuration -> forms -> entity print -> remove what's in the header
The page I'm trying to scrape is http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm
It loads some content through javascript, so I'm trying to use the expected_conditions module in selenium to detect it. What happens is that I apparently detect the element I'm looking for, but when I print the page source, it doesn't contain that element. There's a link labeled "TEST LINK" at the bottom of the page, so I figured if that has loaded, the rest of the page pretty much has also.
Here is my code:
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import TimeoutException
curr_url = r"http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm"
driver = webdriver.Firefox()
driver.get(curr_url)
try:
myElem = WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.LINK_TEXT, 'TEST LINK')))
except TimeoutException:
print("took too long to load")
print("element detected")
elem = driver.find_element_by_link_text('TEST LINK')
html = elem.get_attribute("outerHTML")
print(html)
print(driver.page_source)
driver.close()
I do successfully print out the detected element as TEST LINK
However, in the page_source that is printed out, I cannot find this. The page source is located here. I also tried using other expected_conditions like element_to_be_clickable
So my question is why is the located element not appearing in the page source? Also, is there any other way to detect that the whole page has loaded? Using expected_conditions is really the only potential solution I found.
You were close. Before you exract the outerHTML of the WebElement you need to induce WebDriverWait.
You can use the following solution:
Code Block:
driver.get('http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm')
print(WebDriverWait(driver, 30).until(EC.element_to_be_clickable((By.LINK_TEXT, 'TEST LINK'))).get_attribute("outerHTML"))
print("==========")
print(driver.page_source)
Console Output:
TEST LINK
==========
<html><head><title>
Zip Codes with the Highest Percentage of Population Below Poverty Level in Ohio | Zip Atlas
</title>
<meta name="robots" content="all,index,follow"><meta name="rating" content="general"><meta name="author" content="ZipAtlas.com Development Team"><meta name="language" content="en-us"><meta name="copyright" content="Copyright 2011 ZipAtlas.com"><meta name="revisit-after" content="7 Days"><meta http-equiv="Expires" content="-1"><meta http-equiv="Distribution" content="Global"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="google-site-verification" content="3cRw56ihbmZI3sma1cdmLLpkwcJEE_L1tUFYhaet2xQ">
<style type="text/css">
body, td, div, span, p { color: #333333; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; }
select { color: #333333; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; border: solid 1px #5A81A6; }
a { text-decoration: none; color: #0000D0; }
a:hover { text-decoration: underline; color: #0000D0; }
h1 { margin:0px 0px 10px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 16px; font-weight: normal; color: #3d7795;}
h2 { margin:35px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 15px; font-weight: normal; color: #3d7795;}
h3 { margin:35px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-weight: normal; color: #3d7795;}
span.link { cursor: pointer; text-decoration: none; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; color: #0000D0; }
span.link:hover { cursor: pointer; text-decoration: underline; color: #0000D0; }
td.report_header { border: solid 1px #5A81A6; background-color: #5A81A6; color: #ffffff; }
td.report_data { border: solid 1px #5A81A6; padding: 1px 5px 1px 5px; font-size: 12px; }
</style>
<link rel="preload" href="https://adservice.google.co.in/adsid/integrator.js?domain=zipatlas.com" as="script"><script src="https://partner.googleadservices.com/gampad/cookie.js?domain=zipatlas.com&callback=_gfp_s_&client=ca-pub-7710991166856237"></script><script src="https://pagead2.googlesyndication.com/pagead/js/r20200624/r20190131/show_ads_impl_fy2019.js" id="google_shimpl"></script><script type="text/javascript" src="https://adservice.google.co.in/adsid/integrator.js?domain=zipatlas.com"></script><link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=zipatlas.com" as="script"><script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=zipatlas.com"></script><script src="https://www.google.com/cse/static/element/57975621473fd078/cse_element__en.js?usqp=CAI%3D" type="text/javascript"></script><link type="text/css" rel="stylesheet" href="https://www.google.com/cse/static/element/57975621473fd078/default_v2+en.css"><link type="text/css" rel="stylesheet" href="https://www.google.com/cse/static/style/look/v4/default.css"></head>
<body style="margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: url('/images/bg.gif');">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td style="background: url('/images/shadow-left.gif') top right repeat-y;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;height:200px; background: url('/images/bg-top-left.gif') top right no-repeat;">
<tbody><tr>
<td> </td>
</tr>
</tbody></table>
</td>
<td style="width:930px;background:url('/images/bg-top.gif') top left repeat-x;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td>
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td>
<img border="0" src="/images/logo.gif" alt="ZipAtlas Home">
</td>
</tr>
</tbody></table>
</td>
<td align="right" valign="bottom" style="color: #c0c0c0; padding-bottom: 3px; font-size: 13px;">
<a style="color: #ffffff;" href="/downloads/">Database Download</a>
</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" style="width:100%; background-color:#ffffff;">
<tbody><tr>
<td style="padding: 10px 10px 10px 10px; height:550px;" valign="top">
<!--<form action="/" method="get">//-->
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9;">
<tbody><tr>
<td><h1>Zip Codes with the Highest Percentage of Population Below Poverty Level in Ohio</h1></td>
<td align="right" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td><img border="0" src="/images/social/facebook-s.gif"></td>
<td style="padding-left:1px;"><img border="0" src="/images/social/twitter-s.gif"></td>
<td style="padding-left:1px;"><img border="0" src="/images/social/myspace-s.gif"></td>
<!--<td style="padding-left:15px;"><input type="text" name="q" style="width:175px;" value="" /></td>
<td><input type="submit" value="Search" /></td>//-->
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--</form>//-->
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9;">
<tbody><tr>
<td style="padding:15px 0px 10px 0px;" align="center">
<script type="text/javascript" async="" src="https://cse.google.com/cse.js?cx=013012024412622983838:nucmfhluwdu"></script><script>
(function () {
var cx = '013012024412622983838:nucmfhluwdu';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9">
<tbody><tr>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_1_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_1_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_2_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_2_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</tbody></table>
<div id="ctl00_ContentPlaceHolder1_final_content" style="padding-top:10px;">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="padding-left:3px;">Ohio Report:</td>
<td style="padding-left:5px;">
<div style="border: solid 1px #5A81A6; cursor:pointer; padding: 1px 5px 1px 5px; background-color: #FFFFD0; color: #5A81A6;" onmouseover="this.style.backgroundColor='#5A81A6';this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#FFFFD0';this.style.color='#5A81A6';" onclick="onContextMenu(event);" title="Click to select a different Ohio report">
Percentage of Population Below Poverty Level
</div>
</td>
</tr>
</tbody></table>
<td style="background: url('/images/shadow-right.gif') top left repeat-y;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;height:200px; background: url('/images/bg-top-right.gif') top left no-repeat;">
<tbody><tr>
<td> </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="right"><img src="/images/shadow-ll.gif"></td>
<td style="background: url('/images/edge-bottom.gif') top left repeat-x;">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr><td><img src="/images/shadow-lr.gif"></td>
<td align="right"><img src="/images/shadow-rl.gif"></td>
</tr></tbody></table>
</td>
<td><img src="/images/shadow-rr.gif"></td>
</tr>
</tbody></table>
<center>
<div style="color:#c0c0c0; padding: 50px 0px 50px 0px;">
<a style="color: #ffffff;" href="/">Zip Atlas Home</a> |
<a style="color: #ffffff;" href="/downloads/">Downloads</a> |
<a style="color: #ffffff;" href="https://ecovinyl.ca">ecoVinyl</a> |
TEST LINK
<br><br>
<font color="#ffffff">© 2020 ZipAtlas.Com</font>
</div>
</center>
<script type="text/javascript">
function Set(el_name, c)
{
var el = document.getElementById(el_name);
if (el)
{
el.innerHTML = c;
}
}
function Show(el_name)
{
var el = document.getElementById(el_name);
if (el)
{
el.style.display = '';
}
}
function Hide(el_name)
{
var el = document.getElementById(el_name);
if (el)
{
el.style.display = 'none';
}
}
</script>
<!-- expo-MAX Code Start //-->
<!-- Paste this code into every page that you would like to track //-->
<script type="text/javascript">
document.write(unescape('%3Cscript type="text/javascript" src="'+document.location.protocol+'//expo-max.com/adserver/js/"%3E%3C/script%3E'));
</script><script type="text/javascript" src="http://expo-max.com/adserver/js/"></script>
<script type="text/javascript">
expomax_trace('WunfWYG%2bFajQ%2f9F4kqiaXg%3d%3d','cb959e484ba8457ca327aeefce4cb2b4');
</script><div id="g5ef264d7a54140f7b03eff0ea8cfe256" style="display:none;"><iframe style="display:none;" src="https://expo-max.com/adserver/track/?e=WunfWYG%2bFajQ%2f9F4kqiaXg%3d%3d&a=Mozilla%2F5.0%20(Windows%20NT%2010.0%3B%20Win64%3B%20x64)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F83.0.4103.116%20Safari%2F537.36&l=http%3A%2F%2Fzipatlas.com%2Fus%2Foh%2Fzip-code-comparison%2Fpopulation-below-poverty-level.1.htm&r=&w=1366&h=768&p=http:"></iframe></div>
<!-- expo-MAX Code End //-->
<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;"><ins id="aswift_3_expand" style="display:inline-table;border:none;height:0px;margin:0;padding:0;position:relative;visibility:visible;width:0px;background-color:transparent;"><ins id="aswift_3_anchor" style="display:block;border:none;height:0px;margin:0;padding:0;position:relative;visibility:visible;width:0px;background-color:transparent;"></ins></ins></ins></body><iframe id="google_esf" name="google_esf" src="https://googleads.g.doubleclick.net/pagead/html/r20200624/r20190131/zrt_lookup.html#" data-ad-client="ca-pub-7710991166856237" style="display: none;"></iframe></html>
I'm creating a project in excel, and I want my cells to be automatically colored.
In what way can I color the cells in the range of C3: G16 with respect
to the cells equal to column A?
table.tableizer-table {
font-size: 12px;
border: 1px solid #CCC;
font-family: Helvetica, Arial, sans-serif;
text-align:center;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
<table class="tableizer-table">
<thead>
<tr class="tableizer-firstrow">
<th>A</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>19/8/19</td>
<td>19/8/2019</td>
<td>20/8/2019</td>
<td>21/8/2019</td>
<td>22/8/2019</td>
<td>23/8/2019</td>
<td>24/8/2019</td>
<td>25/8/2019</td>
<td>26/8/2019</td>
</tr>
<tr>
<td>19/8/19</td>
<td>19/8/2019</td>
<td>20/8/2019</td>
<td>21/8/2019</td>
<td>22/8/2019</td>
<td>23/8/2019</td>
<td>24/8/2019</td>
<td>25/8/2019</td>
<td>26/8/2019</td>
</tr>
<tr>
<td>19/8/19</td>
<td>19/8/2019</td>
<td>20/8/2019</td>
<td>21/8/2019</td>
<td>22/8/2019</td>
<td>23/8/2019</td>
<td>24/8/2019</td>
<td>25/8/2019</td>
<td>26/8/2019</td>
</tr>
</tbody>
</table>
Desired outcome:
Select range C3 to G16. Create a new conditional format rule with a formula, enter the formula =$A3=C3, and set the format that you want.
I recently reviewed the Pluralsight course on HTML email and then made a sample for myself. I tested it through Mailchimp and the Mailchimp test environment renders it as expected for both mobile and desktop, but when I sent a test email to myself, both gmail clients that I use (Gmail app through Chrome on desktop and Android app on mobile) appeared to strip the style and link tags, in particular stripping the media screen size queries and associated classes, as well as font imports.
This article claims that gmail clients are now accepting tags, at least on most platforms, including the two I am testing. However, as noted the #media and #import queries are not working. (1) Is there something obviously wrong with my code?, or (2) is this an issue with Mailchimp?
HTML email code, and part of
<!DOCTYPE html>
<html lang="en">
<head>
<title>Happy Holidays!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico" rel="stylesheet">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES ------------------- */
#outlook a {
padding: 0; /* Force Outlook to provide a "view in browser" message */
}
.ReadMsgBody {
width: 100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass {
width:100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; /* Force Hotmail to display normal line spacing */
}
body, table, td, a { /* Prevent WebKit and Windows mobile changing default text sizes */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td { /* Remove spacing between tables in Outlook 2007 and up */
mso-table-lspace: 0pt;
mso-table-rspace:0pt;
}
img { /* Allow smoother rendering of resized image in Internet Explorer */
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES --------------------------- */
body {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
a {
text-decoration: none;
}
/* iOS BLUE LINKS */
.apple-links a {
color: #A50001;
text-decoration: none;
}
/* FONTS */
#import url('https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico');
/* MOBILE STYLES ------------------------ */
#media only screen and (max-width: 600px) {
td[class="logo"] img {
margin: 0 auto !important;
}
table[class="wrapper"] {
width: 100% !important;
}
td[class="mobile-image-pad"] {
padding: 0 10px 0 10px !important;
}
td[class="mobile-title-pad"] {
padding: 10px 0px 0px 10px !important;
}
td[class="mobile-text-pad"] {
padding: 10px 10px 10px 10px !important;
}
td[class="mobile-column-right"] {
padding-top: 20px !important;
}
img[class="fluid-image"] {
width: 100% !important;
height: auto !important;
}
td[class="hide"] {
display: none !important;
}
td[class="mobile-button"] {
padding: 12px 60px 12px 60px !important;
}
td[class="mobile-button"] a {
font-size: 24px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Preheader inbox text
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" background="img/url" alt="Bappy Bolidays!" width="100%" height="100" style="background-size:contain;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (HERO) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#C3D79C" style="padding: 20px 0 20px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="64%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<img src="img/url" alt="Two Beautiful Peeps" width="384" height="288" border="0" style="display: block; image-orientation: from-image; color: #A50001; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #339969; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="30%" align="right" class="wrapper">
<tr>
<td valign="middle" height="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="color: #339969; font-family: 'Cabin', sans-serif; font-weight: bold; font-size: 20px; line-height: 24px;" class="mobile-title-pad">
from
</td>
</tr>
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#339969" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-button">
let's go champ →
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (VIGNETTES) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#fff2f9" style="padding: 40px 0 40px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS (ROW 1) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="img/url" alt="Kapanda" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
description more description!
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="right" class="wrapper">
<tr>
<td class="mobile-column-right">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="url/img" alt="Hawaii Sunset" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #339969; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
Description More description.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Gmail generally doesn't support web-fonts. If you have a web font installed on your own computer, you’ll be able to see it in Gmail, but that's it.
Gmail supports #media queries almost everywhere, but not everywhere. The Litmus article you referenced contains a support table of Gmail products and their #media query support.
There's little telling which product MailChimp Or Litmus are using to generate their previews, so it could look fine on their end and break in your account... with no error on either end.
You said that you checked using Android app on mobile, and that seems like one of the Gmail products that doesn't support media queries ↓ ↓ ↓
This is pure conjecture, but from what I understand Google is done rolling out this change. So those red x's might remain unsupported for some time.
Gmail does support style blocks, but doesn't support selectors in CSS. Remove the selectors and your CSS will work. For example, change:
td[class="mobile-text-pad"]
to:
td.mobile-text-pad
And it should work.