HTML with multiple CSS classes not rendering when HTML sent as a parameter of a JSON request
up vote
1
down vote
favorite
I have an API which takes a JSON as a request parameter. One of the fields in this JSON is a HTML string. The HTML string picks its css from a .css file. However, for HTML elements having 2 css classes, none of the css class is picked up.
Here is my method which creates the dictionary :-
private func createCalendarInviteDictionary() -> [String: Any] {
var calendarInviteDict = [:] as [String: Any]
calendarInviteDict["emailId"] = hostDict["HostEmailAddress"]
calendarInviteDict["startTime"] = mgVisitorInfo.startDate
calendarInviteDict["endTime"] = mgVisitorInfo.endDate
calendarInviteDict["location"] = mgVisitorInfo.locationSite
calendarInviteDict["subject"] = "Welcome!!"
calendarInviteDict["allDayEvent"] = "no"
calendarInviteDict["isSkypeMeeting"] = "no"
calendarInviteDict["isHigh"] = "yes"
calendarInviteDict["requiredAttendees"] = [mgVisitorInfo.email]
calendarInviteDict["optionalAttendees"] =
return calendarInviteDict
}
Below is the incomplete method where I call the above method and convert dictionary to JSON :-
private func createCalendarInvite(_ completion: @escaping dataRequestCompletionBlock) {
var calendarInviteDict = createCalendarInviteDictionary() as [String: Any]
let emailContentHelper = EmailContentHelper()
calendarInviteDict["body"] = emailContentHelper.constructEmailBody()
var calendarInviteJSON = ""
if let theJSONData = try? JSONSerialization.data(
withJSONObject: calendarInviteDict,
options: [.prettyPrinted]) {
calendarInviteJSON = String(data: theJSONData, encoding: .utf8)!
print("JSON string = (calendarInviteJSON)")
}
let calendarInviteParams = ["requestJSONString": calendarInviteJSON] as [String: String]
// do something else
}
Below is what gets logged for JSON String in the console :-
JSON string = {
"optionalAttendees" : [
],
"requiredAttendees" : [
"abc@gmail.com"
],
"location" : "location",
"emailId" : "xyz@gmail.com",
"isSkypeMeeting" : "no",
"body" : "<html><head><style type="text/css" media="all">#banner {ntwidth: 100%n}nn* {n box-sizing: border-box;n}nn.blue {n color: #007DB8;n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackBold {n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackLight {n font-family: 'Roboto';n font-weight: light;n font-size: 14pt;n}nn.table-column1 {n vertical-align: top;n padding-left: 0ptn}nn.table-column2 {n padding-left: 20pt;n}nn.centerText {n text-align: center;n}nnimg {n display: block;n margin-left: auto;n margin-right: auto;n}n</style></head><body><p><img class="banner" src="https://i.abc.com/sites/csimages/Banner_Imagery/all/invite_web.png" alt="Invite-Image-With-Logo" border="0"></p><p><span class="blackBold">Dear</span><span class="blue"> letsbondiway</span></p><p><span class="blackLight">We are very much looking forward to your visit to the </span><span class="blackBold">location</span><span class="blackLight"> Campus.</span></p><br><span class="blue">Your visit details:</span><br><table><tr><td class="blue table-column1">Company:</td><td class="blackLight table-column2">company</td></tr><tr><td class="blue table-column1">Arrival Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 1:30 AM</td></tr><tr><td class="blue table-column1">Departure Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 2:30 AM</td></tr><tr><td class="blue table-column1">Visiting:</td><td class="blackLight table-column2">letsbondiway</td></tr></table><br></body></html>",
"isHigh" : "yes",
"endTime" : "2018-11-22 2:30:23.000",
"startTime" : "2018-11-22 1:30:23.000",
"allDayEvent" : "no",
"subject" : "Welcome!!"
}
As can be seen, the html in the JSON logged in above has 2 flavors of elements - one with just one css class
<span class="blackBold">Dear</span>
and other with 2 css classes -
<td class="blue table-column1">Company:</td>
When this JSON is sent in the API request and the API executes successfully, the HTML part with one css class is rendered correctly but HTML part with 2 css classes is not rendered correctly. It in fact doesn't take properties of either of the 2 classes.
I can obviously use inline style and that should work as well but since I need to use same properties multiple places inside the HTML, I have created a .css file with css classes inside them.
What change shall I need to make to have the HTML part with 2 css classes rendering correctly.
ios css json swift html-email
asked Nov 21 at 20:14
letsbondiway
8310
add a comment |
up vote
1
down vote
favorite
I have an API which takes a JSON as a request parameter. One of the fields in this JSON is a HTML string. The HTML string picks its css from a .css file. However, for HTML elements having 2 css classes, none of the css class is picked up.
Here is my method which creates the dictionary :-
private func createCalendarInviteDictionary() -> [String: Any] {
var calendarInviteDict = [:] as [String: Any]
calendarInviteDict["emailId"] = hostDict["HostEmailAddress"]
calendarInviteDict["startTime"] = mgVisitorInfo.startDate
calendarInviteDict["endTime"] = mgVisitorInfo.endDate
calendarInviteDict["location"] = mgVisitorInfo.locationSite
calendarInviteDict["subject"] = "Welcome!!"
calendarInviteDict["allDayEvent"] = "no"
calendarInviteDict["isSkypeMeeting"] = "no"
calendarInviteDict["isHigh"] = "yes"
calendarInviteDict["requiredAttendees"] = [mgVisitorInfo.email]
calendarInviteDict["optionalAttendees"] =
return calendarInviteDict
}
Below is the incomplete method where I call the above method and convert dictionary to JSON :-
private func createCalendarInvite(_ completion: @escaping dataRequestCompletionBlock) {
var calendarInviteDict = createCalendarInviteDictionary() as [String: Any]
let emailContentHelper = EmailContentHelper()
calendarInviteDict["body"] = emailContentHelper.constructEmailBody()
var calendarInviteJSON = ""
if let theJSONData = try? JSONSerialization.data(
withJSONObject: calendarInviteDict,
options: [.prettyPrinted]) {
calendarInviteJSON = String(data: theJSONData, encoding: .utf8)!
print("JSON string = (calendarInviteJSON)")
}
let calendarInviteParams = ["requestJSONString": calendarInviteJSON] as [String: String]
// do something else
}
Below is what gets logged for JSON String in the console :-
JSON string = {
"optionalAttendees" : [
],
"requiredAttendees" : [
"abc@gmail.com"
],
"location" : "location",
"emailId" : "xyz@gmail.com",
"isSkypeMeeting" : "no",
"body" : "<html><head><style type="text/css" media="all">#banner {ntwidth: 100%n}nn* {n box-sizing: border-box;n}nn.blue {n color: #007DB8;n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackBold {n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackLight {n font-family: 'Roboto';n font-weight: light;n font-size: 14pt;n}nn.table-column1 {n vertical-align: top;n padding-left: 0ptn}nn.table-column2 {n padding-left: 20pt;n}nn.centerText {n text-align: center;n}nnimg {n display: block;n margin-left: auto;n margin-right: auto;n}n</style></head><body><p><img class="banner" src="https://i.abc.com/sites/csimages/Banner_Imagery/all/invite_web.png" alt="Invite-Image-With-Logo" border="0"></p><p><span class="blackBold">Dear</span><span class="blue"> letsbondiway</span></p><p><span class="blackLight">We are very much looking forward to your visit to the </span><span class="blackBold">location</span><span class="blackLight"> Campus.</span></p><br><span class="blue">Your visit details:</span><br><table><tr><td class="blue table-column1">Company:</td><td class="blackLight table-column2">company</td></tr><tr><td class="blue table-column1">Arrival Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 1:30 AM</td></tr><tr><td class="blue table-column1">Departure Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 2:30 AM</td></tr><tr><td class="blue table-column1">Visiting:</td><td class="blackLight table-column2">letsbondiway</td></tr></table><br></body></html>",
"isHigh" : "yes",
"endTime" : "2018-11-22 2:30:23.000",
"startTime" : "2018-11-22 1:30:23.000",
"allDayEvent" : "no",
"subject" : "Welcome!!"
}
As can be seen, the html in the JSON logged in above has 2 flavors of elements - one with just one css class
<span class="blackBold">Dear</span>
and other with 2 css classes -
<td class="blue table-column1">Company:</td>
When this JSON is sent in the API request and the API executes successfully, the HTML part with one css class is rendered correctly but HTML part with 2 css classes is not rendered correctly. It in fact doesn't take properties of either of the 2 classes.
I can obviously use inline style and that should work as well but since I need to use same properties multiple places inside the HTML, I have created a .css file with css classes inside them.
What change shall I need to make to have the HTML part with 2 css classes rendering correctly.
ios css json swift html-email
asked Nov 21 at 20:14
letsbondiway
8310
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have an API which takes a JSON as a request parameter. One of the fields in this JSON is a HTML string. The HTML string picks its css from a .css file. However, for HTML elements having 2 css classes, none of the css class is picked up.
Here is my method which creates the dictionary :-
private func createCalendarInviteDictionary() -> [String: Any] {
var calendarInviteDict = [:] as [String: Any]
calendarInviteDict["emailId"] = hostDict["HostEmailAddress"]
calendarInviteDict["startTime"] = mgVisitorInfo.startDate
calendarInviteDict["endTime"] = mgVisitorInfo.endDate
calendarInviteDict["location"] = mgVisitorInfo.locationSite
calendarInviteDict["subject"] = "Welcome!!"
calendarInviteDict["allDayEvent"] = "no"
calendarInviteDict["isSkypeMeeting"] = "no"
calendarInviteDict["isHigh"] = "yes"
calendarInviteDict["requiredAttendees"] = [mgVisitorInfo.email]
calendarInviteDict["optionalAttendees"] =
return calendarInviteDict
}
Below is the incomplete method where I call the above method and convert dictionary to JSON :-
private func createCalendarInvite(_ completion: @escaping dataRequestCompletionBlock) {
var calendarInviteDict = createCalendarInviteDictionary() as [String: Any]
let emailContentHelper = EmailContentHelper()
calendarInviteDict["body"] = emailContentHelper.constructEmailBody()
var calendarInviteJSON = ""
if let theJSONData = try? JSONSerialization.data(
withJSONObject: calendarInviteDict,
options: [.prettyPrinted]) {
calendarInviteJSON = String(data: theJSONData, encoding: .utf8)!
print("JSON string = (calendarInviteJSON)")
}
let calendarInviteParams = ["requestJSONString": calendarInviteJSON] as [String: String]
// do something else
}
Below is what gets logged for JSON String in the console :-
JSON string = {
"optionalAttendees" : [
],
"requiredAttendees" : [
"abc@gmail.com"
],
"location" : "location",
"emailId" : "xyz@gmail.com",
"isSkypeMeeting" : "no",
"body" : "<html><head><style type="text/css" media="all">#banner {ntwidth: 100%n}nn* {n box-sizing: border-box;n}nn.blue {n color: #007DB8;n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackBold {n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackLight {n font-family: 'Roboto';n font-weight: light;n font-size: 14pt;n}nn.table-column1 {n vertical-align: top;n padding-left: 0ptn}nn.table-column2 {n padding-left: 20pt;n}nn.centerText {n text-align: center;n}nnimg {n display: block;n margin-left: auto;n margin-right: auto;n}n</style></head><body><p><img class="banner" src="https://i.abc.com/sites/csimages/Banner_Imagery/all/invite_web.png" alt="Invite-Image-With-Logo" border="0"></p><p><span class="blackBold">Dear</span><span class="blue"> letsbondiway</span></p><p><span class="blackLight">We are very much looking forward to your visit to the </span><span class="blackBold">location</span><span class="blackLight"> Campus.</span></p><br><span class="blue">Your visit details:</span><br><table><tr><td class="blue table-column1">Company:</td><td class="blackLight table-column2">company</td></tr><tr><td class="blue table-column1">Arrival Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 1:30 AM</td></tr><tr><td class="blue table-column1">Departure Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 2:30 AM</td></tr><tr><td class="blue table-column1">Visiting:</td><td class="blackLight table-column2">letsbondiway</td></tr></table><br></body></html>",
"isHigh" : "yes",
"endTime" : "2018-11-22 2:30:23.000",
"startTime" : "2018-11-22 1:30:23.000",
"allDayEvent" : "no",
"subject" : "Welcome!!"
}
As can be seen, the html in the JSON logged in above has 2 flavors of elements - one with just one css class
<span class="blackBold">Dear</span>
and other with 2 css classes -
<td class="blue table-column1">Company:</td>
When this JSON is sent in the API request and the API executes successfully, the HTML part with one css class is rendered correctly but HTML part with 2 css classes is not rendered correctly. It in fact doesn't take properties of either of the 2 classes.
I can obviously use inline style and that should work as well but since I need to use same properties multiple places inside the HTML, I have created a .css file with css classes inside them.
What change shall I need to make to have the HTML part with 2 css classes rendering correctly.
ios css json swift html-email
asked Nov 21 at 20:14
letsbondiway
8310
I have an API which takes a JSON as a request parameter. One of the fields in this JSON is a HTML string. The HTML string picks its css from a .css file. However, for HTML elements having 2 css classes, none of the css class is picked up.
Here is my method which creates the dictionary :-
private func createCalendarInviteDictionary() -> [String: Any] {
var calendarInviteDict = [:] as [String: Any]
calendarInviteDict["emailId"] = hostDict["HostEmailAddress"]
calendarInviteDict["startTime"] = mgVisitorInfo.startDate
calendarInviteDict["endTime"] = mgVisitorInfo.endDate
calendarInviteDict["location"] = mgVisitorInfo.locationSite
calendarInviteDict["subject"] = "Welcome!!"
calendarInviteDict["allDayEvent"] = "no"
calendarInviteDict["isSkypeMeeting"] = "no"
calendarInviteDict["isHigh"] = "yes"
calendarInviteDict["requiredAttendees"] = [mgVisitorInfo.email]
calendarInviteDict["optionalAttendees"] =
return calendarInviteDict
}
Below is the incomplete method where I call the above method and convert dictionary to JSON :-
private func createCalendarInvite(_ completion: @escaping dataRequestCompletionBlock) {
var calendarInviteDict = createCalendarInviteDictionary() as [String: Any]
let emailContentHelper = EmailContentHelper()
calendarInviteDict["body"] = emailContentHelper.constructEmailBody()
var calendarInviteJSON = ""
if let theJSONData = try? JSONSerialization.data(
withJSONObject: calendarInviteDict,
options: [.prettyPrinted]) {
calendarInviteJSON = String(data: theJSONData, encoding: .utf8)!
print("JSON string = (calendarInviteJSON)")
}
let calendarInviteParams = ["requestJSONString": calendarInviteJSON] as [String: String]
// do something else
}
Below is what gets logged for JSON String in the console :-
JSON string = {
"optionalAttendees" : [
],
"requiredAttendees" : [
"abc@gmail.com"
],
"location" : "location",
"emailId" : "xyz@gmail.com",
"isSkypeMeeting" : "no",
"body" : "<html><head><style type="text/css" media="all">#banner {ntwidth: 100%n}nn* {n box-sizing: border-box;n}nn.blue {n color: #007DB8;n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackBold {n font-family: 'Roboto';n font-weight: bold;n font-size: 14pt;n}nn.blackLight {n font-family: 'Roboto';n font-weight: light;n font-size: 14pt;n}nn.table-column1 {n vertical-align: top;n padding-left: 0ptn}nn.table-column2 {n padding-left: 20pt;n}nn.centerText {n text-align: center;n}nnimg {n display: block;n margin-left: auto;n margin-right: auto;n}n</style></head><body><p><img class="banner" src="https://i.abc.com/sites/csimages/Banner_Imagery/all/invite_web.png" alt="Invite-Image-With-Logo" border="0"></p><p><span class="blackBold">Dear</span><span class="blue"> letsbondiway</span></p><p><span class="blackLight">We are very much looking forward to your visit to the </span><span class="blackBold">location</span><span class="blackLight"> Campus.</span></p><br><span class="blue">Your visit details:</span><br><table><tr><td class="blue table-column1">Company:</td><td class="blackLight table-column2">company</td></tr><tr><td class="blue table-column1">Arrival Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 1:30 AM</td></tr><tr><td class="blue table-column1">Departure Date:</td><td class="blackLight table-column2">Thu, Nov 22, 2018 2:30 AM</td></tr><tr><td class="blue table-column1">Visiting:</td><td class="blackLight table-column2">letsbondiway</td></tr></table><br></body></html>",
"isHigh" : "yes",
"endTime" : "2018-11-22 2:30:23.000",
"startTime" : "2018-11-22 1:30:23.000",
"allDayEvent" : "no",
"subject" : "Welcome!!"
}
As can be seen, the html in the JSON logged in above has 2 flavors of elements - one with just one css class
<span class="blackBold">Dear</span>
and other with 2 css classes -
<td class="blue table-column1">Company:</td>
When this JSON is sent in the API request and the API executes successfully, the HTML part with one css class is rendered correctly but HTML part with 2 css classes is not rendered correctly. It in fact doesn't take properties of either of the 2 classes.
I can obviously use inline style and that should work as well but since I need to use same properties multiple places inside the HTML, I have created a .css file with css classes inside them.
What change shall I need to make to have the HTML part with 2 css classes rendering correctly.
ios css json swift html-email
ios css json swift html-email
asked Nov 21 at 20:14
letsbondiway
8310
asked Nov 21 at 20:14
letsbondiway
8310
edited Nov 21 at 20:20
asked Nov 21 at 20:14
letsbondiway
8310
asked Nov 21 at 20:14
letsbondiway
8310
asked Nov 21 at 20:14
letsbondiway
8310
8310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Chaining classes in emails is not a good idea since many email clients won't recognize it.
Keep in mind that css on emails are very limited. So instead of adding multiple classes to each cell, only add one. Or even better, inline styling. I know inline styling is very messy, but when it comes to emails, nested tables and inline styling is your best friend. Keep it as simple as possible.
answered Nov 21 at 20:29
Marius
767
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Chaining classes in emails is not a good idea since many email clients won't recognize it.
Keep in mind that css on emails are very limited. So instead of adding multiple classes to each cell, only add one. Or even better, inline styling. I know inline styling is very messy, but when it comes to emails, nested tables and inline styling is your best friend. Keep it as simple as possible.
answered Nov 21 at 20:29
Marius
767
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
add a comment |
up vote
0
down vote
Chaining classes in emails is not a good idea since many email clients won't recognize it.
Keep in mind that css on emails are very limited. So instead of adding multiple classes to each cell, only add one. Or even better, inline styling. I know inline styling is very messy, but when it comes to emails, nested tables and inline styling is your best friend. Keep it as simple as possible.
answered Nov 21 at 20:29
Marius
767
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
add a comment |
up vote
0
down vote
up vote
0
down vote
Chaining classes in emails is not a good idea since many email clients won't recognize it.
Keep in mind that css on emails are very limited. So instead of adding multiple classes to each cell, only add one. Or even better, inline styling. I know inline styling is very messy, but when it comes to emails, nested tables and inline styling is your best friend. Keep it as simple as possible.
answered Nov 21 at 20:29
Marius
767
Chaining classes in emails is not a good idea since many email clients won't recognize it.
Keep in mind that css on emails are very limited. So instead of adding multiple classes to each cell, only add one. Or even better, inline styling. I know inline styling is very messy, but when it comes to emails, nested tables and inline styling is your best friend. Keep it as simple as possible.
answered Nov 21 at 20:29
Marius
767
answered Nov 21 at 20:29
Marius
767
answered Nov 21 at 20:29
Marius
767
answered Nov 21 at 20:29
Marius
767
767
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
add a comment |
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
For now, I ended up using a combination of class selector and inline styling to achieve what I wanted. With the class selector taking only one class name and the remaining style inline.
– letsbondiway
Nov 24 at 4:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419826%2fhtml-with-multiple-css-classes-not-rendering-when-html-sent-as-a-parameter-of-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
