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.

edited Nov 21 at 20:20

asked Nov 21 at 20:14

letsbondiway

8310

add a comment |

up vote
1
down vote

favorite

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>

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.

edited Nov 21 at 20:20

asked Nov 21 at 20:14

letsbondiway

8310

add a comment |

up vote
1
down vote

favorite

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>

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.

edited Nov 21 at 20:20

asked Nov 21 at 20:14

letsbondiway

8310

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>

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

edited Nov 21 at 20:20

asked Nov 21 at 20:14

letsbondiway

8310

edited Nov 21 at 20:20

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

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 |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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.

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.

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.

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.

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

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

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl