Affects Version/s: 7.4.0 CE GA1
Fix Version/s: None
Component/s: JS Themes Toolkit > Theme Generator
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.
Any 7.3 theme can be used instead of steps 2 and 3
- Update liferay-theme-tasks to the latest version
- Create a new theme based on classic
- Ensure version of Liferay for the theme is 7.3
- Upgrade the theme using
- 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.
- Save all changes and build the theme using
- Deploy the theme to a Liferay 7.4 instance and make it the theme.
- Click on the language selector
The drop-down area should open next to the button itself rather than pushing the page down.
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