SpringBoot, Thymeleaf - html

Can somebody explain me what's going on?
I'm using thymeleaf and springboot
i got template file
out.html
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SAD</title>
<link th:href="#{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<h1>sad</h1>
<div class="container">
<div th:if="${not #lists.isEmpty(list)}">
<h2>People to deport</h2>
<table class ="table table-striped">
<tr>
<th>Name</th>
<th>Surname</th>
<th width="100px">Age</th>
</tr>
<tr th:each = "people :${list}">
<td th:text="${people.name}"></td>
<td th:text="${people.surname}"></td>
<td th:text="${people.age}"></td>
</tr>
</table>
</div>
</div>
<p th:text="#{hello}">text</p>
</body>
</html>
I got request mapping on it in my controller. It works correctly. But as you see i used resource bundle and my default language is russian. (it has displayed '?' signs) on that place.
<p th:text="#{hello}">text</p>
So i wanted to display russian language content on my page . I changed charset from UTF-8 to UTF-16 and everything crashed. Actually codding type is not matter cause i tried to do that with charset=ISO-8859-1
Server starts, displays other templates. But that one does not work even if i turn back UTF-8 charset back and restart server.
I solved it like:
1. I copied my html from it;
2.Delete the file and create new named also out.html;
3.Put that html in the file and it works.
So can somebody explain what is going on?

Related

Springboot: Displaying pictures on html by using the link out of a database

I'm using springboot and thymeleaf to map to display data from my database on an html page.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" th:href="#{/assets/style.css}" />
</head>
<body>
<p th:text="${title}"></p>
Create a new Post
Create a new Comment
<table>
<tr th:each="post : ${posts}">
<td th:text="${post.creationDate}"></td>
<td th:text="${post.titel}"></td>
<td th:text="${post.content}"></td>
<td><a th:href="#{/newComment(postId=${post.id})}">new Comment</a></td>
<td th:text="${post.comments}"></td>
<td><img th:src="${post.bild}"></td>
</tr>
</table>
I used DTOs to map the entities, however when display the actual html page the image is not displayed(404 Error), even though the link is showing up when i inspect the tag.
Am i missing something obvious? Isn't this an easy way to display images on my page, if i don't want to convert them to a bytestream?
I'm guessing you need more information, but i don't know which would be helpful. Any help appreciated!
It's not possible to access local filesystem from a webpage that runs on a web server. See this answer for details.

HTML Email - Outlook.com is moving CSS styling from one DOM element to another

I know the title of this post sounds strange, but it's exactly what's happening. While testing an email template with Email and Acid and Litmus I found that Outlook.com, in all browsers, was migrating styling from one DOM element to another. I thought at first it was an unescaped tag or other common issue with email, but that wasn't the case. I also thought it could be the button markup, which was pulled from Litmus's own Bullet Proof Buttons post. But after trying all four options, plus others I found online, it didn't make a difference.
To discreetly troubleshoot this I crafted an email template with only the bare minimum needed to reproduce the what's happening.
Email Template: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I sent a test email from Litmus to an Outlook.com account I have access to and pulled the actual markup it's generating. Here it is.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
As you can see it's taking the styling from TD > A and applying it to the following TD. In the original email template I had, this happened multiple times throughout. See the examples below
Original Template: Each blue sections is broken
Testing Template: Outlook.com in multiple browsers
Testing Template: Examples of other email clients
This feels more like an Outlooks.com bug than an Outlook.com quirk. Can anyone explain what's happening and suggest ways to resolve this?
After writing this all up I realized it was also stripping the A tag. And that this was probably because it wasn't a resolvable URL. In the original template I had ESP codes {campaign-ID...etc} and it probably wasn't resolving those either. So it just stripped them for security reasons, cool. But then for some reason, it takes the styling of that A link, strips it, and applies it to an element further down in the DOM. WTF were they thinking!
Hope this saves someone else the trouble from having to go down the same rabbit hole.
tl;dr This is only an issue when testing links with unresolvable URLs as outlook removes them for security reasons, but then fumbles and applies the styling on the removed A link to another DOM element.

cannot apply external CSS even after providing fully qualified URL in HTML String

body {}
.table{
background-color:aqua
}
this is my StyleSheet1.css saved in my local at C:\Users\ingyadav\Documents\Visual Studio 2015\Projects\StyleSheet1.css
<html>
<head>
<link rel="stylesheet" href="file:///C:/Users/ingyadav/Documents/Visual Studio 2015/Projects/StyleSheet1.css" type="text/css" />
</head>
<body>
<table class="table" border="1" style="width:300px;height:500px">
<tr style="width:auto">
<td style="width:150px;height:500px"></td>
<td>
<table border="1" style="width:150px;height:500px">
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this is my HTML string to be loaded into pdf now
when i pass this to the evo html to pdf converter,its not loading the external css into the pdf.
in evopdf support they mentioned to provide the fully qualified URL's but after using proper URL also its unable to load the external css.
can anyone help me on this please.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
More Example: https://www.w3.org/TR/html401/struct/links.html#h-12.3

Disable automatic html field format recognition in IE Edge browser

I have html table with IP (10.212.133.144) and GUID (6237be55-0e51-4a0c-9c8a-701451389736) values. IEEdge-Win10 browser applies weird hyperlink formatting on them.
This is a simplified example without any css style and IEEdge is doing an extra magic. I don't want any hyperlink auto formatting, how can I disable this behaviour? It should work without end user interaction. No other browsers do it.
Reference question but I could not compile a working solution
Taming the automatic telephone number thing in the windows 10 edge browser
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table cellspacing="2" cellpadding="2" style="border: 1px solid blue;">
<thead id="tasks_header">
<tr>
<th class="normal">#</th>
<th class="normal">IP</th>
<th class="normal">GUID</th>
</tr>
</thead>
<tbody id="rows1">
<tr><td>1</td><td>1.2.3.4</td><td>a8f890ee-0ff3-44af-ba53-17c173eb62d4</td></tr>
<tr><td>2</td><td>11.22.33.44</td><td>6237be55-0e51-4a0c-9c8a-701451389736</td></tr>
</tbody>
<tbody id="rows2">
<tr><td>1b</td><td>10.212.133.144</td><td>5150471e-5528-4823-88f8-4fff9e2377be</td></tr>
<tr><td>2c</td><td>10.210.116.164</td><td>17b9dc7a-1e70-41e0-8abc-8202597930e9</td></tr>
</tbody>
</table>
</body>
</html>
edit: This behaviour is seen on two separate Win10 machines already, will try more once get access to PCs.
They are being recognized as phone numbers. You can disable this by adding this metatag
<meta name="format-detection" content="telephone=no"/>

Copy/Paste HTML From One Page To Another Loses CSS Reference

I am creating a web site and need to copy certain HTML from one page to another (rather than re-write it. Take this table for example:
I copy (from Page1.aspx)...
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="InfoBoxContent"></td>
</tr>
</table>
Then I paste (into Page2.aspx) and get....
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="auto-style1"></td>
</tr>
</table>
It takes the CSS from my CSS file, inserts it in the top of the APSX file and names it auto-style1 in this case only for InfoBoxContent but it could be all sometimes. It is driving me nuts.
I am using Visual Studio 2012. Any ideas why this is happening?
Does page 2 have a header with a link tag pointing to that stylesheet? If css isn't being expressed it may because that specific page doesn't see it. If that's the case, you may need to added a tag pointing to that stylesheet.
Something like:
<LINK href="special.css" rel="stylesheet" type="text/css">
Or more like:
<!DOCTYPE>
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>