Unable to load the complete layout while adding a new html file

[Navinder Kumar Singh]

I am facing an issue while adding a new html file, it is working fine with other pages which dynamic changes the content in the th:fragment="content", but when I add a new page complete layout is not being inherited, example CSS and many script. Please resolve this issue.

And when a new file is added with same layout:decorate, below problem arises

[Emanuel Rabina]

Hi there, are you able to provide either:

• the HTML of the content and layout pages where you're facing the issue?
• or the HTML of a minimum layout and content that can also reproduce your issue?

I can better help if you're able to provide an example where I can see the problem happening, or enough information so I can reproduce the issue on my own machine.

[Navinder Kumar Singh]

https://github.com/wesmarty/SpringBootIssueWithThymeleaf.git

Hello Sir. I have shared the git link with you. Please look into the issue

[Emanuel Rabina]

I spun up the project in your link and when I opened your test page I saw in my browser dev tools lots of 404s to your JS/CSS resources. It looks like the issue is a relative path problem. Your layout.html file has lines that looked like this:

<link rel="stylesheet" th:href="@{dist/css/ChemPlace.min.css}">

That means to look for that file relative to your current page. So when you'd open the test page on your machine at http://localhost:5000/, the full path to the resource becomes http://localhost:5000/dist/css/ChemPlace.min.css. But when you open the test page on another URL like http://localhost:5000/testing/, then the full path to the resource becomes http://localhost:5000/testing/dist/css/ChemPlace.min.css, and that results in not being able to find your files.

The fix is to add a leading / to your resource paths:

<link rel="stylesheet" th:href="@{/dist/css/ChemPlace.min.css}">

I applied this to all of the items in the layout file that didn't have an absolute URL path in them, and your other pages started looking correct. I also spotted an image resource in your fragments/sidenavigation.html file, so you might want to correct that as well 🙂

This sounds like the same issue you're describing in #191?

[Navinder Kumar Singh]

Thanks a lot Sir for helping me out fixing this. It is working now. I Won't be repeating this silly mistake again. 😃

…

On Wed, Aug 21, 2019 at 2:50 PM Emanuel Rabina ***@***.***> wrote: I spun up the project in your link and when I opened your test page I saw in my browser dev tools lots of 404s to your JS/CSS resources. It looks like the issue is a relative path problem. Your layout.html file has lines that looked like this: <link rel="stylesheet" th:href="@{dist/css/ChemPlace.min.css}"> That means to look for that file *relative* to your current page. So when you'd open the test page on your machine at http://localhost:5000/, the full path to the resource becomes http://localhost:5000/dist/css/ChemPlace.min.css. But when you open the test page on another URL like http://localhost:5000/testing/, then the full path to the resource becomes http://localhost:5000/testing/dist/css/ChemPlace.min.css, and that results in not being able to find your files. The fix is to add a leading / to your resource paths, eg: <link rel="stylesheet" th:href="@{/dist/css/ChemPlace.min.css}"> I applied this to all of the items in the layout file, and your other pages started looking correct. I also spotted an image resource in your fragments/sidenavigation.html file, so you might want to correct that as well 🙂 This sounds like the same issue you're describing in #191 <#191>? Although there you mention you have a leading /? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#190?email_source=notifications&email_token=AHOUFVS7VIUCLV2VZ3NVTMTQFUCGLA5CNFSM4IMUIXT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4ZAZXI#issuecomment-523373789>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHOUFVV5K2G7VL2GBZ42H6DQFUCGLANCNFSM4IMUIXTQ> .