Java. Thymeleaf. After CRUD operation all .CSS styles on page disappearing

Mytap :

A have simple CRUD web application. And I want to bind UI and backend with thymeleaf. After I create some data and get server response - all styles are disappearing. I'm new to thymeleaf, CSS and HTML. Can someone help me to figure out where is the problem? Before and after:

Save operation method:

  @PostMapping("/user/save")
    public ModelAndView save(@ModelAttribute("userDTO") @Valid UserDTO userDTO,
                             BindingResult bindingResult, WebRequest request, Errors errors) {
        User registered = new User();
        if (!bindingResult.hasErrors()) {
            registered = createUserAccount(userDTO, bindingResult);
        }
        if (registered == null) {
            bindingResult.rejectValue("email", "message.regError");
        }
        if (bindingResult.hasErrors()) {
            bindingResult.getAllErrors().forEach(error -> log.error(error.toString()));
            return new ModelAndView("authorization/registration", "error", bindingResult.getAllErrors());
        } else {
            return new ModelAndView("users", "user", userDTO);
        }
    }

registration.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
    <div th:replace="fragments/css_fragments :: css_background_layer"></div>
</head>

<body>
<div style="text-align:center">
    <div th:replace="fragments/menu_fragments :: header_menu"></div>
</div>
<div style="margin: 0 auto; width: 20%; padding-top: 18%;">
    <div class="registration-form">
        <!--/*@thymesVar id="userDTO" type="com.socnetw.socnetw.model.UserDTO"*/-->
        <form id="form" method="post" action="/user/save" th:object="${userDTO}">
            <label>
                <input name="username" placeholder="Username" required="required" th:field="*{username}"
                       type="text">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('username')}" th:text="${err}"></li>
            </ul>
            <label>
                <input name="realName" placeholder="Real Name"
                       type="text" th:field="*{realName}">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('realName')}" th:text="${err}"></li>
            </ul>
            <span></span><br>
            <label>
                <input name="email" placeholder="Email" required="required" th:field="*{email}"
                       type="email">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('email')}" th:text="${err}"></li>
            </ul>

            <label>
                <input name="phoneNumber" placeholder="Phone Number" required="required" th:field="*{phoneNumber}"
                       type="tel">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('phoneNumber')}" th:text="${err}"></li>
            </ul>
            <span></span><br>

            <label>
                <input name="password" placeholder="Password" th:field="*{password}"
                       required="required" type="password">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('password')}" th:text="${err}"></li>
            </ul>
            <label>
                <input name="passwordMatcher" placeholder="Repeat password" th:field="*{matchingPassword}"
                       required="required" type="password">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('matchingPassword')}" th:text="${err}"></li>
            </ul>
            <span></span><br>
            <button type="submit" style="margin-top: 20px">Register</button>
        </form>
    </div>
</div>
</body>
</html>

css fragment

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<div th:fragment="css_background_layer">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
          rel="stylesheet"
          th:href="@{'https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'}"
          type="text/css">

    <link href="css/style.css" rel="stylesheet"
          th:href="@{css/style.css}"
          type="text/css">

    <div class="overlay"></div>
</div>
</html>

Metroids :

You need to use an absolute url to your css, rather than a relative one. When you go to /user/save it's looking for /user/save/css/style.css -- which probably doesn't exist.

th:href="@{/css/style.css}"

Java. Thymeleaf. After CRUD operation all .CSS styles on page disappearing

Guess you like