CODEWITHSUNDEEP
htmlcssnode.jsejs
user17203628
user17203628

Reputation: 5

Why does my CSS not work in an EJS file rendered inside an if statement

I'm trying to apply CSS to this EJS file but no matter what kind of styling I apply nothing works. Here is the code sample:

itemEdit.ejs

<%- include("partials/header.ejs", {title: ` - Items`, body_id: `items`} )%>
<%- include("partials/navbar.ejs", {bg: `dark`})%>

<div class="edit-container">
    <div class="row">
        <h1>Edit item</h1>
        <a href="/items">
            <<<-Back to items page</a>

    <form action="/itemEdit/item-edit/<%= item._id%>" method="post">
        <input type="text" name="name" placeholder="enter item name">
        <input type="text" name="description" placeholder="enter item description">
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
</div>

<%- include("partials/footer.ejs")%>

index.ejs

app.get('/itemEdit/:id', isLoggedIn, (req, res) => {
    // Query for session user object
    User.findById({ _id: req.user._id },
        (err, doc) => {
            if (err) { console.log(err); }
            else {
                const { userInventory } = doc

                for (let i = 0; i < userInventory.length; i++) {
                    if (userInventory[i]._id == req.params.id) {
                        res.render('itemEdit.ejs', {
                            item: userInventory[i], // Item object
                            user: doc // Session user object
                        })
                    }
                }
            }
        })
})

This is what I added to the CSS to test if it's working.

style.css

.edit-container {
    background-color: red;
}

Even after I added the red background it doesn't show that styling. The CSS is loaded from the header.ejs file and I can confirm that it works on all the other EJS files except this one. Could it be because I have it inside an IF statement and that's why the CSS won't apply and even the FOOTER won't display properly even though it works on all the other EJS pages.

Any help is appreciated!

UPDATE

After playing around in the console, I noticed that the app is treating the itemEdit.ejs file as a folder. See screenshot: console. What would be the reason for this? I never made it into a folder, it's only a simple EJS file.

Upvotes: 0

Views: 2764

Answers (4)

Y W
Y W

Reputation: 23

I've also had this problem, but only when the route url has a dynamic variable in it. Like in you case '/itemEdit/:id', 'id' is a variable. For some reason the browser translates 'itemEdit' as a new folder and 'id' becomes a file in the folder.

Upvotes: 0

Young Finn
Young Finn

Reputation: 1

I had the same problem, I narrowed it down to this line of code in the header partial file <link rel="stylesheet" href="css/styles.css">. I had my css in a public folder as well so there shouldn't be a problem.

Adding a / in front of css folder like this: <link rel="stylesheet" href="/css/styles.css">

Fixed it without destroying the rest of the code. I don't know what that does i guess i got more reading to do. Hope this helps

Upvotes: 0

Jeff
Jeff

Reputation: 11

You can do this easily with express if added as dependencies.

$npm install express

Make a folder named "public" in your projects folder. In public folder you can create your css folder.

Then in your index.ejs:

const express = require("express");

const app = express();

app.use(express.static("public"));

Basically gives EJS permission to load static files in public folder and no more need for internal css.

Upvotes: 1

Dumitru Birsan
Dumitru Birsan

Reputation: 837

have you tried this format : href='/stylesheets/style.css' ? without the '/' it will look in the relative path which would become

'/itemEdit/stylesheet/style.css'

you can also check the path of the requested file by opening the debug window and going to the 'network' panel, then do a F5 to reload the page and you'll see all files being loaded

at this point you can click on specific file (in this case style.css) and check the full path that the browser is using to get the file

Upvotes: 0

Related Questions