Page template is not retained on published page

Getting Started
#1

Hi ,
I am using Entando Page template to generate a custom template which looks something like this.

Screenshot from 2021-01-31 17-24-20
Screenshot from 2021-01-31 17-24-201366×768 28.3 KB

But when I use this page template to create a sample page with 3 different MFE’s/widgets the template layout is diregarded and the Frames show on top of each other instead. When I inspect in DOM it shows 3 divs stacked on top of each other.

I have even added the index.css from ootb/pageTemplates, but it doesn’t seem to work.

Please find my template code below :

                <#assign wp=JspTaglibs["/aps-core"]>
            <@wp.info key="systemParam" paramName="applicationBaseURL" var="appUrl" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html style="overflow-x: hidden;">
        <head>
          <title><@wp.currentPage param="title" /></title>
    		<!-- Custom OOTB page template styles -->
            <link rel="stylesheet" href="<@wp.resourceURL />static/css/ootb/page-templates/index.css" rel="stylesheet">
        </head>
        <body>
    		 <div><@wp.show frame=0 /></div>
          	 <div style="width: 100%;margin: 0px 20px;"><@wp.show frame=1 /></div>
    		 <div style="margin: 0px 20px;"><@wp.show frame=2 /></div>
    	</body>
      </html>

and below is my Frame json configuration

{
  "frames": [
    {
      "pos": 0,
      "descr": "Frame 1",
      "mainFrame": false,
      "defaultWidget": null,
      "sketch": {
        "x1": 0,
        "y1": 1,
        "x2": 1,
        "y2": 11
      }
    },
    {
      "pos": 1,
      "descr": "Frame 2",
      "mainFrame": false,
      "defaultWidget": null,
      "sketch": {
        "x1": 0,
        "y1": 0,
        "x2": 11,
        "y2": 0
      }
    },
    {
      "pos": 2,
      "descr": "Frame 3",
      "mainFrame": false,
      "defaultWidget": null,
      "sketch": {
        "x1": 2,
        "y1": 1,
        "x2": 11,
        "y2": 11
      }
    }
  ]
}

Am I missing any other css files which need to be imported for the default templating to work?

Br,
Anubhav

#2

hi @anubhav,

You will need to provide more css code to get your desired layout. Fastest thing that you can solve this is to use Bootstrap’s Grid CSS which already included within Entando Portal UI. All you have to do is use this import CSS line:

<link rel="stylesheet" href="<@wp.resourceURL />static/css/bootstrap.min.css" rel="stylesheet">

After that, you can now add grid-related css classes with your elements. Hope this helps!

happy coding,

Jeff

1 Like