After sending an HTML Gmail using Nodemailer, some rules may be missing from the CSS

I am attempting to send HTML content via Nodemailer to my Gmail account. Initially, I sent the email as plain text to ensure everything was working properly.

    const email =
    {
        from:    emailAddress,
        to:      sendTo,
        subject: title,
        text:    emailBody
    };

    //Send the email
    transporter.sendMail(email, function(error, info)
    {
        //If there was an error, return false as it failed to send, else true
        const emailSent = (error) ? false : true;
        return resolve(emailSent);
    });

The plain text version of the email displayed correctly with all CSS rules maintained.

However, when I changed

text: emailBody

to

html: emailBody

the email parsed the body string as HTML, causing some CSS rules to be missing upon opening.

For example, the original li tag in my JS email body...

'<li style="-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); border-radius: 10px; padding: 20px; display: flex; justify-content: center; height: 90px; margin: 10px 0;">'

But in the email, it appeared as...

<li style="border-radius:10px;padding:20px;display:flex;height:90px;margin:10px 0">

As you can see, the box shadow and justify-content rule disappeared while the other properties remained intact.

Could it be that Gmail does not support certain styles like box shadows or flex properties? Is this a limitation of Nodemailer? Any insights would be helpful.

Answer №1

It is my belief that Gmail supports these properties. Due to limited support for modern features by many mail services, tables are still commonly used. For a detailed list of CSS properties and media queries supported by Gmail, refer to this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js failing to return external API call to its original requester

In our app structure, we use AngularJS on the client side, Node.js on the server side, and a service layer for external API calls. The call chain seems to be successful up until the Node.js layer, but the expected value isn't reaching back to the orig ...

Is there a way to access environment variables within npm or package.json configuration?

I'm working on creating a package.json file to ensure that when my NodeJS app is deployed on Heroku, it will execute the scripts.postinstall step using an environment variable. Here is an example: ... "scripts": { "postinstall": "command $ENV_VAR"} ...

When the video finishes playing, it will automatically switch to a still image with clickable links

I'm completely new to HTML5 and I'm looking for the simplest way to play a pre-made video from Adobe After Effects in HTML5, and then replace the last frame with a still image that contains clickable icons. 1) I've explored numerous example ...

The Javascript Navbar is malfunctioning on Firefox

Currently, I am working on a horizontal menu that includes submenus. My goal is to use Javascript to display the submenu when a user hovers over the parent menu. I created a JSFiddle example, which seems to be experiencing issues in FireFox! However, it w ...

Transferring information submitted in a form to a service using AngularJS

Trying to implement a shopping cart app where I need to pass an object into a service function using Angular. Following advice from another post, but encountering an unprovided error and a strange syntax error on page load. The issues seem to be originatin ...

The route handler for app.get('/') in Express is not returning the input data as expected

I have multiple routes set up, and they are all functioning properly except for the app.get('/') route. When I navigate to 'localhost:3000/', nothing is being displayed in the backend console or on the frontend. The Home component is su ...

Exploring JSON parsing using javascript?

I'm currently attempting to work through this webRTC example and have encountered an issue that appears to be minor in nature... The if statement consistently fails to return true, despite the fact that the console message indicates that the property ...

Make a POST request using Express API, supporting both JSON and XML data

I am facing a unique challenge with my express API. While it typically accepts JSON post requests, there is one particular API that requires an XML post body instead. To set up my express app accordingly, I have used the following configuration: // Init ...

What is the best way to toggle a d3 svg overlay using a leaflet layer control?

I am looking for a solution to place 3 d3 svgs on a leaflet map and control them as easily as leaflet layers. Check out this code example, which works but is not ideal. The key part is from line 75 onwards, where I create a custom layer control linked to ...

"If the filesystem.writefile function in Node.js returns a successful result, then the conditional statement will

Is it accurate to say that fs promise writeFile and fs writeFileSync function in the same way? Or is there a difference in their behavior? const fs = require('fs') const fsProm = require ('fs').promises //write file sync fs.writeFileSy ...

Issues arise when the condition fails to function correctly during the process of form

I am currently working on a question from my elder brother's question paper, but I am struggling to solve it. The task is to create a form with two text fields, a radio button, and a submit button. The text fields should be named "account number" and ...

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

Hidden input for Vue form submission

I need to include two Id's with a user's input by adding them in a hidden input field. Since v-model doesn't work with hidden inputs, I have set up my hidden input like this: <input type="hidden" ref="property_id" :nam ...

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

Encounter issue when attempting to insert multiple items into MongoDB

// Import User and Item Models const User = require('../../models/User'); const Item = require('../../models/Item'); router .post('/login/:id', passport.authenticate('jwt', {session: false}), (req, res) => { ...

Replace a certain substring with the corresponding keys found in an object using JavaScript

I am currently working on a function within a project that is designed to replace instances of /endpoint/{item.id}/disable/{item.name} with /endpoint/123/disable/lorem when the function is provided with the URL and item details. The item is expected to co ...

Strategies for managing data sharing between PHP and JavaScript

Today, I am seeking your valuable advice. Currently, I am working on a significant legacy project at my company, which involves finding a solution to share constants between our PHP 5 back-end (MVC architecture, no framework) and our front-end with Angula ...

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

Tips for patiently anticipating the resolution of a new promise

Searching for a way to ensure that a promise waits until a broadcast is fired, I came across some enlightening posts on this platform and decided to implement the technique detailed below. However, it appears that the broadcastPromise does not actually wai ...

The dropCollection function is failing to delete the collection

Version numbers: mongoose 4.0.3, node 0.10.22, mongod db version 3.0.1 I've been attempting to drop a collection using Mongoose, but I'm encountering issues. execute: function() { return Q(mongoose.connect('mongodb://127.0.0.1:27017/te ...