Using Position Taglibs in Embedded Portlets

This article documents how to make use of four different position taglibs while using the Liferay platform. The four taglibs are: BodyBottomTag, BodyTopTag, HtmlBottomTag and HtmlTopTag.

These taglibs will position the code that is included within them at the top or bottom of the specified area in the Document Object Model (DOM). You can also embed portlets in your theme. This article provides you with information and examples on how to use these position taglibs.

Resolution

If you include one of the position taglibs inside a portlet, the default behavior is going to be slightly different depending on whether the portlet is or is not embedded.

• Portlet Not Embedded

  If the portlet is not embedded, the taglib would include the code at the top or the bottom.

• Portlet Is Embedded

  If the portlet is embedded, the taglib would include the code inline. That means, in the same position where the portlet is embedded.

The reason why an embedded portlet functions in this way is because it follows after loading JavaScript, which helps to avoid performance issues while rendering embedded portlets.

In case you want to have an embedded portlet with a position taglib—of which the default behavior is to show the code at the top or the bottom—you need to make use of the attribute position with value auto in that taglib. Below you can see an example of part of the code of an embedded portlet:

Without Using the Attribute Position:

<liferay-util:html-bottom>
    <script>
        console.log('This log will be executed inline.');
    </script>
</liferay-util:html-bottom>

Using the Attribute Position:

<liferay-util:html-bottom position="auto">
    <script>
        console.log('This log will be executed at the bottom.');
    </script>
</liferay-util:html-bottom>