The CSS styles are not taking effect as intended

This is my Spring controller

@RequestMapping(value = "/board/{id}" ,method=RequestMethod.GET)
public String scrumboard(@PathVariable("id") String id) { // if I change    string to key error occurs
    System.out.println(id); //123
    return "html/board";
}

Here is the HTML code.

<a class='scrumboard' href='/board/123'>

Issue:

<a class='board' href='/board'>

By using the statement above, I am able to successfully access the board.jsp page.

<a class='board' href='/board/123'>

When I pass it with an ID, I can retrieve the board.jsp page but CSS and JS files are not being applied. The ID in my code is generated dynamically.

Answer №1

<mvc:resources mapping="/static/**" location="/assets/" />

Add the above line to your Spring configuration file and don't forget to update the location path accordingly.

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

What is the best way to use multiple transparent images as backgrounds on a website using HTML?

This is the current background settings: <html> <head> <title></title> </head> <body style="background: #5d5d5d url(images/tile_dark.png); border: 20px solid #00c09e; ...

Creating duplicates of elements and generating unique IDs dynamically

I'm in the process of cloning some form elements and I need to generate dynamic IDs for them so that I can access their content later on. However, I'm not well-versed in Jquery/Javascript and could use some guidance. Here's a snippet of my ...

jQuery - Enhancing User Experience with Dynamic Screen Updates

Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

What could be the reason for the image not appearing from the database?

I am having trouble displaying both the image and title from my database. Currently, only the title is showing up. Why isn't the image displaying? Below is the code I am using: @foreach($posts as $post) <tr> < ...

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

Compel the content element to scroll forcefully

I've scoured the vast expanse of the internet, but my search has been fruitless. Here lies my dilemma. I want my <main> element to have a scrollbar with overflow-y:scroll. No scrollbar on the body, just on the main element. For a visual repr ...

Why is it not possible for me to change the font color to white?

To modify the font of the accordion heading to white, please check out the screenshot provided below. While the code functions properly in "fiddle", it seems that when I inserted the CSS snippet into a SharePoint 2013 page, the font color does not display ...

The RouteChangeStart event is triggered when the index.html page is first loaded

When it comes to the route change event, my preference is for it to be triggered when the user navigates to the next page from the initial one, rather than on the initial page load itself. In this scenario, I have associated the directive "meeee" with the ...

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

Some devices experiencing website update issues while others are successful

My website is functioning properly on my laptop and phone, but not on my school iPad (managed by the district). I have already cleared the cache, but the site does not update. It was working fine earlier, and I need to present it next Monday. Please help a ...

Can anyone suggest a more efficient approach to handling variations using CSS?

Within the message component, there are currently only two variants available: error and success. This project is built using vue3 script setup and utilizes SCSS for styling. <script setup lang="ts"> defineOptions({ name: 'Notificat ...

Steps for creating a div that appears on top of all other elements on a webpage

I have created a custom dropdown list with checkboxes from scratch because the project I am working on needs to be compatible with older versions of IE. Overall, the result is good but there is one issue - when I click on the drop down list, every other el ...

Utilizing R to Retrieve the Date from an HTML Element

I've been exploring ways to extract dates from an online community using the R programming language. As a newcomer to R, I've been facing challenges with the R package that seems to retrieve a long list instead of a specific date or time. I atte ...

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

Managing numerous ajax forms within a single page

Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...

Rearrange the position of the divs in every other container

Assume that I have the following HTML structure: <div class="article"> <div class="article_img"></div> <div class="article_preview"></div> </div> Both article_img and article_preview elements have a defined width and ...

Utilize AngularJS to import a unique custom css stylesheet for every individual webpage

Is there a way to apply different stylesheets to each page without mixing classes? For example, how can I link style.css to index.html and about.css to about.html? This is my AngularJS code: // Define module var myApp = angular.module('myApp', ...