Max height of Nice dropdown with flags is limited to 6 languages

Created on 16 August 2023, over 1 year ago

Problem/Motivation

When the Nice dropdown with flags Widget look is selected and you have more than 6 languages enabled the drop down requires additional scrolling to see all of the available languages. This is a bad UI as languages after 6 won't be visible and people may not know to scroll in a drop down.

Steps to reproduce

Enabled gtranslate. Select Nice dropdown with flags and enable more than 6 languages with a flag size of 24px or larger.

Proposed resolution

Rewrite the javascript code so that the max-height is not hardcoded to a max-height: 198px on line 133 of dwf.js and also change the code in line 201 that also uses a hard-coded max-height and math to calculate the height that limits the height to accommodate 6 languages.

Remaining tasks

In theory the max-height could be set based upon the size of the screen or at least be made user configurable to support more than 6 languages. There does appear to be a limit where expanding it to a very large number of languages could result in a dropdown that goes beyond the screen and since it overflows is not navigable either.

User interface changes

Add option to have nice menu dropdown show more than 6 languages in the drop down and add this to the admin form of gtranslate.

API changes

Data model changes

πŸ› Bug report
Status

Needs review

Version

3.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States robbt

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024