Unable to load CSS in Node.js when the parameter in Express.js is too long

I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css:

app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(express.static(__dirname + '/views'));

This is the structure of my directories:

myapp
--Controller
----admin.js
--db
----db.js
--views
----admin
------user.html
------addUser.html
----css
------style.css
--app.js

To link html with css, I use this format:

<link href="../css/style.css" rel="stylesheet">

I have applied css successfully for my website. However, when I include parameters like:

app.get('/admin/users', admin.users);
app.get('/admin/add', admin.add);

The URLs are:

localhost:1080/admin/users

localhost:1080/admin/add

and my css works properly. But when I add a parameter:

app.get('/admin/users/add', admin.add);

The URL becomes:

localhost:1080/admin/users/add

and my css doesn't work.

If anyone knows how to fix this issue, please provide assistance.

Answer №1

It is advisable to avoid using relative paths for your CSS links. Therefore, it is recommended to specify them as follows:

<link href="/css/style.css" rel="stylesheet">

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

An unexpected error occurred during Azure Pipeline's end-to-end testing: Chrome encountered an issue while attempting to launch and exited in an

I am currently in the process of executing my protractor test within an Azure pipeline. The following steps have been completed successfully: npm install webdriver update However, when running "npm run e2e," I encountered the error below (highlighted wit ...

Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than ...

What is the best way to retrieve parameters from a URI using AngularJS?

I'm brand new to Angular, so most concepts are unfamiliar to me at this point. Currently, I am working on a page with the following URL: http://domain/araneum/page/show/1 Is there a simple way to extract the '1' from the URL? From what I ...

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

What is the purpose of including "-g" in the npm install command?

As a newcomer to node.js, I have noticed a difference in the package installation process. In tutorials, it seems straightforward - just type "npm install express" and you're good to go. However, when I try the same command in my console, I encounter ...

Trouble with response.write function within nested function in Node.js

I am facing a perplexing issue that I just can't seem to figure out. Here is my current node configuration: var url = require('url'); var mongoClient = require('mongodb').MongoClient; var server = require('http').createS ...

Error encountered: CORS restriction preventing access when attempting to connect from local network

I am currently developing a web application where the backend retrieves data from a MongoDB and then the frontend displays it. Here is a simplified outline of the setup: Backend (ExpressJs) const app = express(); const port = process.env.PORT || 3001; a ...

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

CSS problem with rotating image carousel

I'm currently working on incorporating the moving box feature displayed at the bottom of this page. Despite following the CSS code provided, I am facing an issue where the left navigation arrow is not appearing. Can anyone provide any insights or sugg ...

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

Ways to expand logo space within the header of the Twentysixteen Theme on WordPress

I am facing an issue with my logo being resized to a much smaller size of 200px even though it is originally over 2000px wide. In the style.css file, I found the following code: .custom-logo { max-width: 180px; } Despite changing the max-width value t ...

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

Strange behavior of Lambda function in Typescript

Within a larger class, I'm working with the following code snippet: array.map(seq => this.mFunction(seq)); After compiling using the tsc command, it becomes: array.map(function (seq) { return _this.mFunction(seq); }); Everything seems fine so f ...

What steps can be taken to reduce the size of the cards in ant.design?

Currently, I am using the ant.design Card component to present messages in a chat webapp built with react/redux. However, each card is displaying too much space around the text. Is there a way to adjust the card so that it wraps the text more closely? htt ...

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

Saving documents in a PostgreSQL database with the help of NodeJS and Angular2+

I have researched various tutorials and examples on the internet for uploading and storing files in PostgreSQL using NodeJS, Multer, Sequelize, Express, but haven't found a solution that works for my project. My project consists of an Angular app wit ...

The functionality of app.get('') is malfunctioning in Node.js when it comes to handling query parameters

I'm currently working on updating my conversation application to handle new routes that accept parameters and pass them along to the client side. However, I'm facing an issue with the .get() method not rendering the HTML as expected. 'use s ...