CODEWITHSUNDEEP
htmlcssspring-bootfreemarker
pvpkiran
pvpkiran

Reputation: 27048

Freemarker css not working for html rendered from backend

I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
    <style type="text/css">
        .topRight {
            position:absolute;
            top:0;
            right:0;
        }
        .data-body {
            font-family: 'Roboto', sans-serif;
            background-color: #f7f7f7
        }
        .option, .span {
            font-size: 14px;
        }
        .p {
            font-weight: 300;
            font-size: 16px;
            color: #333333;
            line-height: 1.22;
        }
        .h1, .h2 {
            font-weight:normal;
            font-size: 18px
        }
        .h3 {
            color: #9b9b9b;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.22;
        }
    </style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
    
</div>

<div>
    ${databody}
</div>
</body>
</html>

the variable databody is being set from the backend. It has content like

<h1>Something</h1>

<h2>foo bar</h2>

css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.

How can I get this working.

Upvotes: 1

Views: 2564

Answers (3)

pvpkiran
pvpkiran

Reputation: 27048

There are couple of issues here.
The css for html tags should be named without the preceding dot. For example .h1 should be h1

Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.

If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.

So the solution here is ${databody} should be ${databody?no_esc}

More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping

Upvotes: 0

justthink
justthink

Reputation: 459

.h1 means that you want to select all class="h1" elements.


     .h1, .h2 {
            font-weight:normal;
            font-size: 18px
        }
        .h3 {
            color: #9b9b9b;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.22;
        }

You can select the <h1> directly and apply css to it via h1{...}

It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.

Upvotes: 0

ddekany
ddekany

Reputation: 31122

It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.

Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.

Upvotes: 1

Related Questions