Page API: Content is rendered outside container when Template is built with HTML Tables
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Description
Parent Issue
TBD
Problem Statement
For a little bit of context.
We currently want to support Email Creation and Email Editing on UVE. Emails accept HTML to display content but they use HTML Tables instead of div and CSS to ensure cross compatibility across all the email clients that exist and also provide a good and solid layout to display the data.
Issue
Currently if you build a template using this constrains to build Emails, the content will render outside the container and will add an empty contentlet inside the container, creating a visual bug, that every time you hover the content you added, an empty container will be wrapped around with the UVE tools.
There's a workaround that fixes the issue and it is to replace the table and table related tags (tbody, tr, etc) to div on edit mode.
#if($EDIT_MODE)
<div>
#end
More context in this thread
Steps to Reproduce
The steps to reproduce are basically to build a template but instead of divs, use HTML table syntax and then create a page that uses that template.
I can provide an starter that has a template and a page create with it.
Please contact me if you prefer to start by checking the starter.
Template example:
<!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
- We should be able to build templates using
tableandtablerelated tags - Content should render inside their proper HTML container
dotCMS Version
trunk_latest
Proposed Objective
User Experience
Proposed Priority
Priority 4 - Low
External Links... Slack Conversations, Support Tickets, Figma Designs, etc.
More context in this thread
Assumptions & Initiation Needs
- You understand how dotCMS processes the VTL files
- You understand the VTL render engine
- You understand the Page API implications
Quality Assurance Notes & Workarounds
Change all table and table related tags as tr, td, tbody to div on EDIT_MODE
#if($EDIT_MODE)
<div>
#end
Sub-Tasks & Estimates
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Page API and VTL render engine, then reproduce the issue using the table-based template and page described in the report. Trace how table, tbody, tr, and td elements are processed in edit mode and identify why an empty contentlet is created outside the container. Done means table-based templates render content inside the proper container without the extra editable wrapper.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- api, backend-api-design, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100