Cannot add spacing in Thymeleaf

Discussão em 'Angular' iniciado por Govind Rana, Dezembro 3, 2024.

  1. Govind Rana

    Govind Rana Guest

    HTMl template thymeleaf Code below -(other code is different using div and span tag )

    WHOLE Frontend CODE

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Engage Mate - Application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <!-- use the font -->
    <style>
    .vi-page-branding {
    background: #FFF;
    padding-top: 22px !important;
    }

    [class*='vi-']:not(.vi-container),
    [class*='gw-']:not(.gw-container) {
    font-family: "Avenir Next", sans-serif;
    }

    @media (min-width: 1024px) {
    .vi-page-branding__main {
    height: 4.375rem;
    padding: 0 1.875rem;
    }

    <!-- .vi-page-branding__logo {-->
    <!-- width: 6.25rem;-->
    <!-- }-->

    }

    .vi-page-branding__main {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 3.125rem;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    }

    .vi-page-branding__logo img {
    display: block;
    }

    img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
    }

    .vi-page-branding__link {
    text-decoration: none !important;
    display: flex;
    }

    <!-- .vi-page-branding__logo {-->
    <!-- width: 4.0625rem;-->
    <!-- }-->
    </style>
    <style>
    .social-icons li a,
    a.social-icon {
    width: 28px;
    height: 28px;
    display: block;
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    }

    .rounded-x {
    border-radius: 50% !important;
    }

    .social_linkedin {
    background: url(https://www.cresensolutions.com/assets//img/icons/social/linkedin.png) no-repeat;
    }


    body {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 13px;
    line-height: 1.6;

    }

    .footer-v1 .footer {
    padding: 10px 0;
    background: #272727;
    }

    .row {
    margin-right: -15px;
    margin-left: -15px;
    }

    .col-md-6 {
    width: 40%;
    }

    .col-md-3 {
    width: 25%;
    }


    .col-md-6,
    .col-md-3 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

    .footer-v1 .footer p {
    color: #eee;
    }

    .headline {
    display: block;
    margin: 10px 0 25px 0;
    border-bottom: 1px dotted #e4e9f0;
    }

    .footer-v1 .footer h2 {
    color: #eee;
    font-size: 18px;
    font-weight: 200;
    }

    .headline h2 {
    font-size: 22px;
    margin: 0 0 -2px 0;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 2px solid #3498db;
    }

    .list-unstyled {
    padding-left: 0;
    list-style: none;
    }


    .footer-v1 .link-list li {
    border-top: solid 1px #353535;
    }

    .link-list li:first-child {
    border-top: none !important;
    }

    .link-list li {
    border-top: solid 1px #353535;
    }

    p,
    li,
    li a,
    label {
    color: #555;
    }

    .footer-v1 address,
    .footer-v1 .link-list a,
    .footer-v1 .link-list i {
    color: #eee;
    }

    .footer a,
    .copyright a,
    .footer a:hover,
    .copyright a:hover {
    color: #3498db;
    }

    .link-list a {
    color: #eee;
    font-size: 11px;
    padding: 6px 0px;
    display: inline-block;
    text-transform: uppercase;
    }

    a,
    a:focus,
    a:hover,
    a:active {
    outline: 0 !important;
    }

    a {
    color: #337ab7;
    text-decoration: none;
    background-color: transparent;
    }


    .footer-v1 .footer .map-img {
    background: url(https://www.cresensolutions.com/assets/img/map-img.png) 5px 60px no-repeat;
    }

    .footer-v1 address {
    line-height: 23px;
    }

    .footer-v1 address,
    .footer-v1 .link-list a,
    .footer-v1 .link-list i {
    color: #eee;
    }

    address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
    }

    .footer-v1 .copyright {
    background: #222;
    border-top: none;
    padding: 10px 0 5px;
    }

    .wrapper {
    background: #fff;
    }

    .row:after,
    .row:before {
    display: table;
    content: " ";
    }



    .footer-v1 .copyright p {
    color: #eee;
    margin-top: 14px;
    }

    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

    @media (min-width: 768px) and (max-width: 1024px) {

    .footer-v1 .copyright,
    .footer-v1 .footer-socials {
    text-align: left;
    }

    .md-margin-bottom-40 {
    margin-bottom: 40px;
    }
    }

    .social-icons li:hover a {
    background-position: 0 -38px;
    }

    .footer a,
    .copyright a,
    .footer a:hover,
    .copyright a:hover {
    color: #3498db;
    }

    .footer-v1 .copyright a {
    margin: 0 2px;
    }

    .font-weight-bold{
    font-weight: bold;
    }

    </style>
    </head>

    <body style="margin: 0; padding: 0;">
    <div class="row" style="padding: 40px 30px 40px 30px; background-color: #ffffff">
    <p><span th:text="${mailDear}"></span> <span th:text="${username}"></span>,</p>
    <p><span th:text="${mailSubmitterActivityReviewCompletedMessage}"></span>.</p>
    <div th:switch="${tenantId}">
    <div th:case="'teva'">
    <p><a th:href="@{$https://stackoverflow.com/questions/79248557/cannot-add-spacing-in-thymeleaf}"><span th:text="${mailLink}"></span></a></p>
    </div>
    </div>
    <p><span th:text="${mailActivityId}"></span>: <span th:text="${activityId}"></span></p>
    <p><span th:text="${mailActivityType}"></span>: <span th:text="${activityName}"></span></p>
    <p><span th:text="${mailActivityTitle}"></span>: <span th:text="${activityTitle}"></span></p>
    <div th:switch="${tenantId}">
    <div th:case="'teva'">
    <p><span th:text="${mailProduct}"></span>: <span th:text="${productOrTherapeuticArea}"></span></p>
    </div>
    </div>
    <p><span th:text="${mailSubmitterName}"></span>: <span th:text="${submitterName}"></span></p>
    <p><span th:text="${mailActivityStartDate}"></span>: <span th:text="${activityStartDate}"></span></p>
    <div th:switch="${tenantId}">
    <div th:case= "'insmed'">
    <p><span th:text="${mailOwnerName}"></span>: <span th:text="${ownerName}"></span></p>
    <p><span th:text="${mailProduct}"></span>: <span th:text="${product}"></span></p>
    <p><span th:text="${mailSubmittedDate}"></span>: <span th:text="${submittedDate}"></span></p>
    <p><span th:text="${mailReviewersName}"></span>: <span th:text="${reviewerName}"></span></p> --------------------------THIS LINE I NEED TO change
    </div>
    <div th:case="'teva'">
    <p><span th:text="${mailProjectOriginator}"></span>: <span th:text="${projectOriginator}"></span></p>
    <p><span th:text="${mailSubRoleName}"></span>: <span th:text="${subRoleName}"></span></p>
    </div>
    </div>
    <p class="font-weight-bold"><span th:text="${reviewerComments}"></span></p>
    <br></br>
    <div th:switch="${tenantId}">
    <div th:case= "'insmed'">
    <p><span th:text="${mailPleaseClickOnThe}"></span> <a th:href="@{$https://stackoverflow.com/questions/79248557/cannot-add-spacing-in-thymeleaf}"><span th:text="${mailLink}"></span></a> <span th:text="${mailToReviewTheActivity}"></span>.</p>
    </div>
    </div>

    <p><span th:text="${mailNote}"></span></p>
    <br></br>
    <p><span th:text="${mailRegards}"></span>,</p>
    <p><span th:text="${teamName}"></span></p>
    </div>

    <div class="vi-page-branding">
    <div class="vi-page-branding__main">
    <a class="vi-page-branding__link" href="#" rel="home">
    <div class="vi-page-branding__logo">
    <div th:switch="${tenantId}">
    <div th:case= "'insmed'">
    <img src="cid:insmedLogo" alt="Insmed Pharmaceutical Industries Ltd."/>
    </div>
    <div th:case="'teva'">
    <img src="cid:tevaLogo" alt="Teva Pharmaceutical Industries Ltd."/>
    </div>
    </div>
    </div>
    </a>
    </div>
    </div>

    </body>

    </html>
    ----------------------------------------------------------------
    <p class="font-weight-bold"><span th:text="${reviewerComments}"></span></p> - this is working fine check in above whole code
    -------------------------------------------------------------------
    <p class="font-weight-bold">Reviewer Comments:</p> - i have tried this , replacement not working?
    <table>
    <tbody>
    <tr th:each="comment : ${#strings.split(reviewerComments, ' \\| ')}" th:with="fields=${#strings.split(comment, ' - ')}">
    <td th:text="${fields[0]}"></td>
    <td th:text="${fields[1]}"></td>
    <td th:text="${fields[2]}"></td>
    </tr>
    </tbody>
    </table>


    Backend - this is sending the value to reviewerComments variable in frontend , want minimal change in backend

    private String getActivityApprovedComments(String activityId, String action) throws Exception {
    StringBuilder sb = new StringBuilder();

    List<ActivityApprovalAudit> activityApprovalAuditList = activityApprovalAuditService.fetchActivityApprovalAuditByActivityIdAndAction(activityId, action);
    if (activityApprovalAuditList != null && !activityApprovalAuditList.isEmpty()) {
    for(ActivityApprovalAudit activityApprovalAudit: activityApprovalAuditList) {
    long userId = activityApprovalAudit.getUserId();
    LinkedHashMap<String, Object> user = util.getUserByUserId(userId);
    String reviewerName = Util.convertToString(user.get(USER_FULL_NAME));
    sb.append(reviewerName)
    .append(" - ")
    .append(CommonConstants.APPROVED)
    .append(" on ").append(activityApprovalAudit.getCreatedDate())
    .append(" - ")
    .append(activityApprovalAudit.getComment())
    .append("|"); // also try to change here with \n, br and other tag not wokring.
    }
    return sb.substring(0, sb.length() - 3);
    }
    else return sb.toString();
    }


    right now outout is coming like this
    user1 - Approved on Date - comment1 | user2 - Approved on Date - comment2

    spacing is not woking either from backend or from frontends already use .append("\n) in backned and br tag in frontend

    I need this OUTPUT:
    if 3 Reviewer
    Reviewer 3 Name: Approved on Date – Comments

    Reviewer 2 Name: Approved on Date – Comments

    Reviewer 1 Name: Approved on Date – Comments

    if 2 Reviewer
    Reviewer 2 Name: Approved on Date – Comments

    Reviewer 1 Name: Approved on Date – Comments

    [​IMG] - so right i am getting this outlook reply.. i just want to change in reviewer comment in below format .!

    Problem is I have tried multiple spacing and <br> tag and &nbsp; but not working in email notification. Even in backend I have tried \n instead of pipes but nothing working. Am I missing something? Please write a code in HTML Thymeleaf using table or something, so that it will give same output as mentioned specifically spacing issue and make sure it should process. I have tried bunch of solutions. The problem is HTML Thymeleaf did not process after changing in HTML. Might that be a tag issue?

    Continue reading...
    Govind Rana, Dezembro 3, 2024
    #1

Compartilhe esta Página