htmlcssnode.jsejs

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.


Solution

  • 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