Twitter Bootstrap Question posted in

The .css file turns to become an HTML (thymeleaf) where it was embedded to-Twitter bootstrap

This is weird but it looks like Spring has just turned the bootstrap.css file into the thymeleaf .html template. Just take a look at the screenshot:
bootstrap.css appears to have the contents of the .html now...

Can anyone explain me why this has happened and how to fix it? I have chacked and I’m sure that my bootstrap.css file is a normal Twitter-bootstrap CSS. The code of the panel.html template and Thymeleaf Java config are both below:

@Configuration
public class ThymeleafConfig extends WebMvcConfigurerAdapter {

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}

@Bean
public MessageSource messageSource() {
    ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
    messageSource.setBasename("views/localization");
    return messageSource;
}

@Bean
@Description("Thymeleaf template resolver serving HTML 5")
public ClassLoaderTemplateResolver templateResolver() {

    ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();

    templateResolver.setPrefix("views/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("HTML");
    templateResolver.setCharacterEncoding("UTF-8");

    return templateResolver;
}

@Bean
@Description("Thymeleaf template engine with Spring integration")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.addDialect(new Java8TimeDialect());
    templateEngine.setTemplateResolver(templateResolver());
    return templateEngine;
}

@Bean
@Description("Thymeleaf view resolver")
public ViewResolver viewResolver() {

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setTemplateEngine(templateEngine());
    viewResolver.setCharacterEncoding("UTF-8");
    viewResolver.setOrder(1);

    return viewResolver;
}

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("*").setViewName("panel");
    registry.setOrder(0);
}

And the template: 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HBase listener</title>
    <link rel="stylesheet" th:href="@{//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css}" />
    <link rel="stylesheet" th:href="@{static/css/bootstrap.css}" media="all"/>
    <link rel="shortcut icon" th:href="@{img/ico.png}"/>

</head>
<body>
<div class="jumbotron text-center">
    <h1 data-th-text="#{welcome.message}">Welcome</h1>
    <p>Today is: <span data-th-text="${#dates.format(standardDate, 'HH:mm dd-MM-yyyy')}">*_*</span></p>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>555kjvd</h3>
            <p>Presved</p>
        </div>
        <div class="col-sm-4">
            <h3>Preved</h3>
            <p>Preved</p>
        </div>
        <div class="col-sm-4">
            <h3>Preved</h3>
            <p>Preved</p>
        </div>
    </div>
</div>
<div>
</div>
</body>
</html>

And the folder structure:
spring-boot app folder structure

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I still don't know what sort of magic was turning the .css file into the .html one. When the server couldn't serve it (404) - the bootstrap.css was shown as an empty file. Anyway, I need to post here how the problem was solved: I had to make paths like this: 

    <link rel="shortcut icon" data-th-href="@{/img/ico.png}"/>
<link rel="stylesheet" data-th-href="@{/css/bootstrap.css}" 
media="all">

    and the ResourceHandler: 

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

    this works. Also notice that in fact there is a /static/ folder between /resources/ and /css/. So, like here: https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-features-spring-mvc-static-content


  2. 0

    In my case the culprit was the URL Mappings.

    I had two methods in two different controllers pointing to the same path. Usually you get an exception like this:

    org.springframework.beans.factory.BeanCreationException: Error
    creating bean with name ‘requestMappingHandlerMapping’ defined in
    org.springframework.web.servlet.config.annotation.DelegatingWebMvcConfiguration:
    Invocation of init method failed; nested exception is
    java.lang.IllegalStateException: Ambiguous mapping. Cannot map
    ‘studentController’ method

    But in my case it did not occur. So make sure that your mappings are good.
    This was my mapping structure that didn’t cause the exception, but made all my resources (css and js files) point to the current HTML file.

    @Controller
public class StudentController {
  @GetMapping
  public String getRegisterStudentPage(Model model) {
    model.addAttribute("student", new Student());
    return "addStudent";
  }
}

@Controller
public class CourseInstanceController {
  @GetMapping(value = {"/", "/cursusoverzicht"})
  public String getCourseInstancePage(Model model) {
    // ...
    model.addAttribute("coursesInstances", coursesInstances);
    return "viewCoursesInstances";
  }
}
    Login or Signup to reply.
  3. 0

    The problem actually was solved by setting the “path” instead of the “name” parameter to controller’s @RequestMapping. The answer is here: Springboot – Resource interpreted as Stylesheet but transferred with MIME type text/htm

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search