Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-141972

Upgraded themes do not include CSS files need by the Language Selector

Details

    • 3
    • Code Upgrade

    Description

      Summary

      TheĀ @import lines in the css_portal.scss differ between a new 7.4 theme created using yo and an upgrade 7.3 theme using gulp upgrade. Both are intended to target 7.4. The issue is only visible in themes which include the language selector widget.

      Steps to Reproduce

      Any 7.3 theme can be used instead of steps 2 and 3

      1. Update liferay-theme-tasks to the latest versionĀ 
        npm update liferay-theme-tasks
      2. Create a new theme based on classic
        yo liferay-theme:classic
        1. Ensure version of Liferay for the theme is 7.3
      3. Upgrade the theme using
        gulp upgrade
      4. Edit portal_normal.ftl and add the following code. For example, before the <@liferay.user_personal_bar /> line. This assumes there is already a Freemarker assign for the preferences used by the <@liferay.search_bar /> element.
        <div class="autofit-col language-selector mr-1 mr-md-2">
          <@liferay_portlet["runtime"]
                defaultPreferences=preferences
                portletProviderAction=portletProviderAction.VIEW
                portletProviderClassName="com.liferay.portal.kernel.servlet.taglib.ui.LanguageEntry"
          />
        </div>
        
      5. Save all changes and build the theme using
        gulp build
      6. Deploy the theme to a Liferay 7.4 instance and make it the theme.
      7. Click on the language selector

      The drop-down area should open next to the button itself rather than pushing the page down.

      Root Cause

      The issue appears to be a missing overlay class which sets the position of the drop-down area to absolute instead of relative.

      The issue can be worked around by updating the _portal.scss to import ./portal/au.scss (this file will need to be copied from another theme, i.e. a newly created 7.4 theme based on classic). However, there are also some other differences in this SCSS file so there may be implications which need a deeper understanding.

      I have attached screenshots to help describe the behaviour seen and the workaround, which may not be the correct approach

      Attachments

        Activity

          People

            support-lep@liferay.com SE Support
            peter.richards Peter Richards
            Kiyoshi Lee Kiyoshi Lee
            Votes:
            3 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              1 year, 5 weeks, 2 days ago

              Packages

                Version Package