Having trouble applying CSS to this EJS file, no matter what styling I use. Here's the code snippet:
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
})
}
}
}
})
})
Adding CSS but it doesn't apply:
style.css
.edit-container {
background-color: red;
}
Even after adding red background, no change seen. CSS is loaded from header.ejs and works on all other EJS files except this one. Could it be due to being inside an IF statement hindering CSS application? Even footer doesn't display properly compared to other EJS pages.
Any assistance appreciated!
UPDATE
Noticing the app treating itemEdit.ejs as a folder in the console. See screenshot: console. Surprised by this behavior, since it's just a simple EJS file. What could be causing this?