Page API: Content Is Rendered Outside Container When Template Is Built With HTML Tables

by ADMIN 88 views

Introduction

In the context of building templates for email creation and editing on UVE, a common issue arises when using HTML tables instead of div and CSS for cross-compatibility and layout purposes. The content renders outside the container, resulting in a visual bug where an empty contentlet is added inside the container. This article aims to provide a detailed explanation of the problem, steps to reproduce, and proposed solutions.

Problem Statement

When building a template using HTML tables, the content renders outside the container, causing a visual bug. This issue is particularly problematic when using UVE tools, as it creates an empty contentlet that wraps around the content when hovered. The current workaround involves replacing table and table-related tags with div on edit mode.

Steps to Reproduce

To reproduce this issue, follow these steps:

  1. Build a template using HTML tables instead of div and CSS.
  2. Create a page that uses the template.
  3. Observe the content rendering outside the container.

Template Example

The following template example demonstrates the use of HTML tables:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
        }
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: inherit !important;
        }
        #MessageViewBody a {
            color: inherit;
            text-decoration: none;
        }
        p {
            line-height: inherit
        }
        .desktop_hide,
        .desktop_hide table {
            mso-hide: all;
            display: none;
            max-height: 0px;
            overflow: hidden;
        }
        .image_block img+div {
            display: none;
        }
        sup,
        sub {
            font-size: 75%;
            line-height: 0;
        }
        @media (max-width:700px) {
            .desktop_hide table.icons-outer {
                display: inline-table !important;
            }
            .desktop_hide table.icons-inner,
            .social_block.desktop_hide .social-table {
                display: inline-block !important;
            }
            .icons-inner {
                text-align: center;
            }
            .icons-inner td {
                margin: 0 auto;
            }
            .image_block div.fullWidth {
                max-width: 100% !important;
            }
            .mobile_hide {
                display: none;
            }
            .row-content {
                width: 100% !important;
            }
            .stack .column {
                width: 100%;
                display: block;
            }
            .mobile_hide {
                min-height: 0;
                max-height: 0;
                max-width: 0;
                overflow: hidden;
                font-size: 0px;
            }
            .desktop_hide,
            .desktop_hide table {
                display: table !important;
                max-height: none !important;
            }
        }
    </style><!--[if mso ]><style>sup, sub { font-size: 100% !important; } sup { mso-text-raise:10% } sub { mso-text-raise:-10% }</style> <![endif]-->
</head>
<body class="body" style="background-color: #ffffff; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
<table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff;">
    <tbody>
        <tr>
            <td>
            ##Main column
            #set ($mainColumn = $dotThemeLayout.body)
            
            #########################################
            ## ADDING THE ROWS FOR THE MAIN COLUMN ##
            #########################################
            #if ($mainColumn.rows)
                #set($rowCount = 0)
                #foreach($row in $mainColumn.rows)
                    #set($rowCount = $rowCount + 1)
                    ##Every row will have a number of columns
                    #foreach($column in $row.columns)
                        #if($velocityCount == 1)
                            <table class="row row-$!{rowCount}" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #b3dccc;">    
                                <tbody>
                                    <tr>
                                        <td>
                        #end
                                    <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 680px; margin: 0 auto;" width="680">
                                        <tbody>
                                            <tr>
                                                $render.eval($column.draw())
                                            </tr>
                                        </tbody>
                                    </table>
                        #if($velocityCount == $row.columns.size())
                                        </td><!-- /row -->
                                    </tr><!-- /container -->
                                </tbody><!-- /section -->
                            </table>
                        #end
                    #end
                #end
            #end
                </td>
            </tr>
    </tbody>
</table>
</body>
</html>

Acceptance Criteria

To resolve this issue, the following acceptance criteria must be met:

  1. Templates can be built using table and table-related tags.
  2. Content renders inside their proper HTML container.

dotCMS Version

The current dotCMS version is trunk_latest.

Proposed Objective

The proposed objective is to improve the User Experience.

Proposed Priority

The proposed priority is Priority 3 - Average.

External Links

For more context, refer to the following Slack conversation: https://dotcms.slack.com/archives/C06TKDYRG03/p1741882164855549?thread_ts=1740165555.963589&cid=C06TKDYRG03

Assumptions & Initiation Needs

To address this issue, the following assumptions and initiation needs must be met:

  1. Understanding of how dotCMS processes VTL files.
  2. Understanding of the VTL render engine.
  3. Understanding of the Page API implications.

Quality Assurance Notes & Workarounds

To resolve this issue, replace table and table-related tags with div on edit mode:

#if($EDIT_MODE)
<div>
#end

Sub-Tasks & Estimates

Introduction

In our previous article, we discussed the issue of content being rendered outside the container when building templates with HTML tables. In this Q&A article, we will address some of the frequently asked questions related to this issue.

Q: What is the root cause of this issue?

A: The root cause of this issue is the way dotCMS processes VTL files and the VTL render engine. When building templates with HTML tables, the content is not properly rendered inside the container, resulting in a visual bug.

Q: Why is this issue specific to HTML tables?

A: This issue is specific to HTML tables because the VTL render engine has difficulty rendering content inside table elements. When using div and CSS, the content is properly rendered inside the container.

Q: Can this issue be resolved by modifying the template code?

A: Yes, this issue can be resolved by modifying the template code to replace table and table-related tags with div on edit mode. However, this is a workaround and not a permanent solution.

Q: What are the implications of this issue on the User Experience?

A: This issue can have a significant impact on the User Experience, as it creates a visual bug that can be distracting and confusing for users. It is essential to resolve this issue to provide a seamless and intuitive user experience.

Q: How can this issue be prevented in the future?

A: To prevent this issue in the future, it is recommended to use div and CSS instead of HTML tables when building templates. This will ensure that the content is properly rendered inside the container and avoid any visual bugs.

Q: What is the current status of this issue in dotCMS?

A: The current status of this issue in dotCMS is that it is being investigated and a permanent solution is being developed. In the meantime, the workaround of replacing table and table-related tags with div on edit mode can be used to resolve the issue.

Q: How can I provide feedback or report issues related to this topic?

A: You can provide feedback or report issues related to this topic by submitting a support ticket or participating in the dotCMS community forums. Your feedback and input are essential in helping us improve the product and resolve issues like this one.

Q: What are the next steps in resolving this issue?

A: The next steps in resolving this issue involve further investigation and development of a permanent solution. We will continue to work on resolving this issue and providing a seamless and intuitive user experience for our users.

Conclusion

In conclusion, the issue of content being rendered outside the container when building templates with HTML tables is a complex problem that requires a permanent solution. We will continue to work on resolving this issue and providing a seamless and intuitive user experience for our users. If you have any further questions or concerns, please do not hesitate to reach out to us.