Portlet Id changes from Staging to Production

Issue

• ID of the portlet instance is different in the staging environment than in the real environment
• Steps to reproduce:

1. Add a content editor portlet to a page.
2. Go to staging.
3. In staging: Edit "Configuration"
   1. Go to "Advanced styles" tab.
   2. Click on the button "Add CSS code for this portlet only" and add the following code in "Enter custom CSS styles": #portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_OCHcO7s000oU { }
   3. Modify the style to change a title: #portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_OCHcO7s000oU h5 { margin-top: 10px; margin-bottom: 5px; } 
4. Carry out the staging, and the modification has no effect!
5. Enter production and go to the portlet and enter "Configuration"
6. Go to the tab "Advanced styles"
7. The code added in staging is as it is.
8. Click on the button "Add CSS code for this portlet only", and it adds the same as in staging.
9. Let's go to production without logging in and with the browser inspector we look for the portlet with the id "portlet_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_OCHcO7s000oU"

Result: Does not appear! Instead a portlet appears with following ID: "p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_OCHcO7s000oU_".

Notice that it is almost the same. It starts differently and ends differently. But the central part is the same. At first change "portlet" to "p_p_id" and at the end add "_".

Environment

• Liferay DXP 7.0

Resolution

• This issue arises only when there has been a manual intervention in theme's portlet.ftl file.
• To be precise, in portlet.ftl, if below tag has been modified or omitted, then styling cannot be guaranteed:
  <section class = "portlet" id = "portlet _ $ {portlet_id}">
• Adding this styling would resolve the issue.