I use springboot + thymeleaf, it can find the template pages, but could not find the static (css or js).
application.yml :
spring:
application:
name: exe-springboot
thymeleaf:
suffix: .html
resources:
static-locations: /static/**
and the controller :
#RequestMapping("/index")
public String index() {
return "index";
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="../static/index.css"/>
</head>
<body>
<h2>test page</h2>
<span class="test-span">hello world with css</span>
</body>
</html>
index.css
.test-span{
font-size: 20px;
color: red;
}
and browser: http://localhost:8080/index
the except color of hello world with css should be red, but not. and the console, with chrome, shows 404 http://localhost:8080/static/index.css
Try to access the resources in your static directory like this :
<link rel="stylesheet" th:href="#{index.css}"/>
When you are using thymeleaf do not forget "th:" and also you do not have to write the whole path to the resource you want. Spring is looking at static directory so you can access the index.css like in my example.
Also a good practise maybe is to put your css, js, fonts and images in to different folders in your static directory. For example create a folder CSS and put the index.css in it and access it in your HTML like :
<link rel="stylesheet" th:href="#{/css/index.css}"/>
EDIT:
Now the problems is not in the loading of the resources from your static folder. As you can see you are getting a status code 200 that means that the index.css is loaded to your HTML.
So I can suggest you better replace your tag with :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
Related
My project structure:
resoureces
static
css
js
templates
a.html
b.html
My application.yml:
resources:
static-locations: classpath:/
And my html code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="static/img/favicon.ico" />
<script src="static/js/jquery-3.2.1.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-confirm.min.js"></script>
<link href="static/css/reset.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/pretty.css" rel="stylesheet">
<link href="static/css/iconfont.css" rel="stylesheet">
<link href="static/css/common.css" rel="stylesheet">
<link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
<p>test</p>
</body>
My controller:
#Controller
public class IndexController {
#GetMapping("/index")
public String toIndex(){
return "index";
}
#GetMapping("/index/test")
public String test(){
return "index";
}
}
/index css and js success
but /index/test idea show no mapping for it
What is the correct configuration?
HTML How to link CSS and JS?
The issue is that you're using relative paths, such as static/css/reset.css.
Your browser will handle these by using the current path, and append the relative one.
Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.
That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.
One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:
<base href="/" />
By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.
More detailed information can be found within this question.
Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:
<link href="css/reset.css" rel="stylesheet">
I am using thymeleaf with springboot, all the links which I mention with a local url are not working. I even checked the network tab on the browser and all css and js resources load correctly but somehow have no effect.Here is some of the code:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>Fullstack app skeleton</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet"></link>
<!-- Custom styles for this template -->
<link type="text/css" th:href="#{/css/styles.css}" rel="stylesheet">
</link>
</head>
<div th:fragment="before-body-scripts">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}">
</script>
<script th:src="#{/js/fullstackapp.js}"></script>
</div>
</html>
Also, I have checked pom.xml and all dependencies have been loaded correctly. In above code in when I mention the absolute url (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css) then all the bootstrap features work, but when I use the reference to the local jar it doesn't. Can someone suggest a possible reason???
I am using one .java file to mapping Bootstrap and Jquery
#Configuration
public class MvcConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/bootstrap/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.0.0/");
registry.addResourceHandler("/resources/jquery/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.0.0/");
}
}
Here is my html code:
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<script th:src="#{/resources/jquery/jquery.min.js}"></script>
<script th:src="#{/resources/bootstrap/js/bootstrap.js}"></script>
Hope to that help you
im using a laravel 5.4 and i have a problem with urls, when i send value with urls like http://localhost:8000/Music/{id} , laravel does not load styles but if use url without value to get that view it loads styles properly, it also does not load styles if an slash get added to end of url like http://localhost:8000/videos/ but without that slash http://localhost:8000/videos works without problem ..sorry i cant speak english good.
here is my code :
Route::get('Music/{id}','homeController#Music');
public function Music(music $item)
{
return view('music',['item'=>$item]);
}
this works by route model binding properly and does what i want but when it returns music blade file it does not load styles that i linked but if use this instead :
Route::get('Music','homeController#Music');
a
public function Music()
{
$item = music::find(1); //for example
return view('music',['item'=>$item]);
}
that works perfect.
i checked this many ways its because of {vlaues} in urls
it also does not loads styles or js files if an slash get added to end of urls
what is the problem?
Use the asset() function...
<html>
<head>
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
</head>
<body>
<div class="square"></div>
<!-- Same for Javascript... -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
i tested it on this too
<html>
<head>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div class="square"></div>
</body>
</html>
I´ve just started using the Phalcon framework, I´ve read through most of the documentation described on their website but it´s still not clear to me how and where I need to include my css, and javascript files to showcase them on my view pages.
I'm currently maintaining the follow folder structure.
For example my assets folder contains all my css/javascript and jquery files how would I be able to include these in my index file.
I want to know where I could declare the path to find these specific files, and how I can include these files in my view.
You must declare it on your controller.
use Phalcon\Mvc\Controller;
class IndexController extends Controller
{
public function index()
{
// Add some local CSS resources
$this->assets->addCss("css/style.css");
$this->assets->addCss("css/index.css");
// And some local JavaScript resources
$this->assets->addJs("js/jquery.js");
$this->assets->addJs("js/bootstrap.min.js");
}
}
After this you can output your js and css link in the view:
<html>
<head>
<title>Some amazing website</title>
<?php $this->assets->outputCss(); ?>
</head>
<body>
<!-- ... -->
<?php $this->assets->outputJs(); ?>
</body>
<html>
Or you can use Volt syntax like this:
<html>
<head>
<title>Some amazing website</title>
{{ assets.outputCss() }}
</head>
<body>
<!-- ... -->
{{ assets.outputJs() }}
</body>
<html>
I have a web page designed in MVC3. I want to add some data (a disclaimer text) at the bottom of the page on the print button click and then print the page. How to do this?
Thanks!
Description
You can do this using css.
Create a div at the end of your page and give them a className disclaimer
Create a stylesheet file for the normal view of your page and set the display attribute to none
Create another css file called print.css and set the display attribute to visible
Sample
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="myCSSfile.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<head>
<body>
<!--- your content --->
<div class="disclaimer">Your disclaimer text</div>
</body>
</html>
Your myCSSfile.css
.disclaimer { display: none; }
Your print.css
.disclaimer { display: block; }
More Information
CSS Design: Going to Print
You want to use CSS and print media style sheets to make the element visible for printing.
A basic tutorial about this can be seen here: CSS Media Types Create Print-Friendly Pages