Implementing CSS mapping with Spring 3.2.4 MVC sans the use of web.xml

Currently, I am working on a Spring MVC application in Eclipse with Jetty. I have opted for using annotations instead of a web.xml file. Despite trying various solutions found online, I am still unable to get my CSS to work.

The location of my CSS file is as follows:

src/main/webapp/resources/css/main.css

In my JSP file, I have added the following line:

<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/main.css" />">

This line appears to be correct and resolves to:

<link rel="stylesheet" type="text/css" href="/resources/css/main.css">

I attempted adding the following code to my applicationContext.xml:

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

However, the CSS file still cannot be found.

Any suggestions would be greatly appreciated.

EDIT

Below is my initializer code:

public class WebInitializer implements WebApplicationInitializer {

    private final Logger log = Logger.getLogger(WebInitializer.class);

    public void onStartup(ServletContext container) {

        log.info("Starting web app");

        // Create the 'root' Spring application context
        AnnotationConfigWebApplicationContext rootContext = new AnnotationConfigWebApplicationContext();
        rootContext.register(AppConfig.class);
        container.addListener(new ContextLoaderListener(rootContext));

        // Create the dispatcher servlet's Spring application context
        AnnotationConfigWebApplicationContext dispatcherContext = new AnnotationConfigWebApplicationContext();
        dispatcherContext.register(MvcConfig.class);

        // Register and map the dispatcher servlet
        ServletRegistration.Dynamic dispatcher = container.addServlet("dispatcher", new DispatcherServlet(dispatcherContext));
        dispatcher.setLoadOnStartup(1);
        dispatcher.addMapping("/");
    }
}

Answer №1

It seems that integrating XML and programmatic configuration is not recommended.

By referring to this resource, I was able to resolve the issue by adding the following code snippet to my configuration class:

public class WebConfiguration extends WebMvcConfigurerAdapter {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/res/**").addResourceLocations("/static-resources/");
  }

}

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

Ways to enable scrolling for a nested flexbox child when the flexbox container has a defined height

I am attempting to create a nested flexbox child div (child211) that displays a scroll when there is limited space available. The flexbox container has a predetermined height. The flexbox parent of child2 of child211 has overflow: hidden. I do not want th ...

Differences between using CSS custom properties in the :root selector versus the body/html tags

Why would you choose to define global CSS custom properties in the :root element rather than in the body or html tags? How might this decision impact the effects or performance of the page? ...

Using JavaScript, grammatically add material icons side by side

Looking to dynamically update the contents of a div element by adding two material icons side by side. To test this, I created a simple fiddle that demonstrates what I am trying to achieve: https://jsfiddle.net/zog20r7n/3/ When attempting to modify line ...

Alternate option for CSS3 transitions

My code includes a CSS3 transition that adjusts the size and position of an image within a div when hovered over. Check out the demo on FIDDLE While this effect works well, I am concerned about older browsers such as IE9- that do not support CSS3 transit ...

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

Tips for changing the color of text in the navbar with Bootstrap 5

I am currently learning the basics of Bootstrap for front-end web development. However, I am facing difficulty in changing the color of navbar text items to blue. I have tried several online solutions but none seem to work with the following code: <n ...

Using jQuery to access the ID of a div and create a custom close button

I am trying to implement a close button for my popup DIVs. Each one has a unique ID and I want to hide them by setting the CSS 'display' property to 'none' when closed. However, the following example is not functioning as expected. I a ...

An issue has been discovered where IE8 is unable to print an image within the :before pseudo

Is there a way to display an icon image before text without using HTML tags like <img> that may interfere with our JavaScript code if the structure of the HTML changes? I came up with the following code which successfully displays the icon on IE8 an ...

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

Challenges of creating a Hello World Program using Selenium 2 (WebDriver), Java, Maven, and Eclipse

After converting the Java "Hello World" project to a Maven Project, it encountered an error and stopped working. The error message displayed was: "Error: Could not find or load main class...." Hello everyone, I've been searching extensively on Go ...

Using Stylus and Nib CSS in a secure Node/Express application is causing Chrome to flag insecure JavaScript warnings

System notifications: The website at [...] encountered insecure content from http://fonts.googleapis.com/css?family=Quicksand. as well as The site at [...] showed insecure content from http://themes.googleusercontent.com/static/fonts/quicksand/v2/sKd0EM ...

Utilizing CSS to Properly Position FontAwesome Icons

Within my h1, I have incorporated 2 FontAwesome quote icons. To adjust their positioning, I utilized CSS due to the lack of a simpler method. However, I am facing challenges with responsiveness on various screen sizes, leading me to resort to media queries ...

What are the steps to create a background animation?

I currently have a menu form that allows users to add and remove items using React Transition Group. Incorporating ReactJS: <TransitionGroup> { menu.map(meal => <CSSTransition key={meal.id} ...

Creating a Webgrid in MVC and integrating it with a custom class in AngularJS

Hey there, I'm a beginner when it comes to AngularJS and I'm looking to bind the webgrid within the method of AngularJS. $scope.SaveDetails = function () { debugger; var UserID = '@Session["ID"]'; ...

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

After spending a week learning frontend designs, I attempted to replicate a design from Dribble. However, I've been struggling with recreating the active style on the sidebar due to the outward curve. If anyone could provide guidance on achieving thi ...

Unable to load additional data - ScrollTop feature malfunctioning

I'm attempting to load data as the page is scrolled, and for this purpose I am using the following function: $(window).scroll(function () { if($(document).height() <= $(window).scrollTop() + $(window).height()) { alert("don ...

Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website <html> <head> ...

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...