View Issue Details

This bug affects 1 person(s).
 6
IDProjectCategoryView StatusLast Update
19250Bug reportsUsability/user experiencepublic2023-12-07 12:47
Reportermfavetti Assigned To 
PrioritynoneSeverityminor 
Status confirmedResolutionopen 
Product Version6.3.x 
Summary19250: fruity_twentythree language changer unusable with many languages and languages with long names
Description

If you have a default installation with all languages enabled, the menu extends past the browser viewport.
Similarly, on a narrow screen (mobile) languages with many characters pushes the majority of the menu off the screen.

pr inc

Steps To Reproduce

Steps to reproduce

Open the language changer on the survey listing page with all languages enabled (default). Also try to use on mobile.

Expected result

Menu opens, is navigable, and can be used to select any language in the list.

Actual result

Menu opens, many options are off the bottom of the viewport or pushed to the left so far they're unreadable.

(Write here what happened instead)

TagsNo tags attached.
Bug heat6
Complete LimeSurvey version number (& build)master (5d97f49a06b610b32db927d434de76e88e1746a1)
I will donate to the project if issue is resolvedNo
BrowserChrome 119.0.6045.160
Database type & versionn/a
Server OS (if known)n/a
Webserver software & version (if known)n/a
PHP Version8.1

Users monitoring this issue

User List mfavetti

Activities

mfavetti

mfavetti

2023-11-18 10:37

developer   ~78520

okay I've got a fix, but I have no idea how to get the fruity_twentythree theme to build properly
the repo doesn't have a lock file, I tried working backwards to generate it, and it's close, but it's not quite right.
I'm still getting lots of changes to the built theme besides the changes I made to the unbuilt theme. also I suspect there is some other process that runs afterwards that changes whitespace.
i'm attaching a patch, maybe someone that has the correct deps can build and make pr
i'm so many hours into this over such a simple changeset...

i think if someone has the yarn.lock that would help a lot

issue19250.patch (1,524 bytes)   
diff --git a/assets/survey_themes/fruity_twentythree/core/old_core_theme.js b/assets/survey_themes/fruity_twentythree/core/old_core_theme.js
index 67cf09cc39..4d0731eceb 100644
--- a/assets/survey_themes/fruity_twentythree/core/old_core_theme.js
+++ b/assets/survey_themes/fruity_twentythree/core/old_core_theme.js
@@ -21,9 +21,13 @@ export var ThemeScripts = function () {
     /**
      * fix padding of body according to navbar-fixed-top
      * in endpage and in $(window).resize
+     * also fix the max height for the dropdown menu as it depends
+     * on the same value
      */
     var fixBodyPadding = function fixBodyPadding() {
-        $('body').css('padding-top', Math.round($('#survey-nav').outerHeight()) + 'px');
+        var navHeightPx = Math.round($('#survey-nav').outerHeight());
+        $('body').css('padding-top', navHeightPx + 'px');
+        $('#main-dropdown').css('max-height', 'calc(100vh - ' + navHeightPx + 'px)');
     };
 
     /**
diff --git a/assets/survey_themes/fruity_twentythree/navbar/navbar.scss b/assets/survey_themes/fruity_twentythree/navbar/navbar.scss
index f69ed541a4..7ff9d279b3 100644
--- a/assets/survey_themes/fruity_twentythree/navbar/navbar.scss
+++ b/assets/survey_themes/fruity_twentythree/navbar/navbar.scss
@@ -117,6 +117,9 @@ Responsive navbar-brand image CSS
 
     #main-dropdown {
         min-width: 250px;
+        max-width: 100vw;
+        overflow-x: auto;
+        overflow-y: auto;
     }
     .dropdown-header {
         font-weight : $font-weight-500;
issue19250.patch (1,524 bytes)   
mfavetti

mfavetti

2023-11-21 09:53

developer   ~78559

@p_teichmann

you added the last commit, do you have build dependency info? or do you still have the same set of dependencies installed and can build from my patch?

p_teichmann

p_teichmann

2023-11-21 10:28

administrator   ~78562

Last edited: 2023-11-27 11:31

@mfavetti Hey, the build dependencies can be a bit confusing since we are not correctly using it. The way how we do it internally to get the correct state is, delete the contents of the node_modules folder, then do a git reset --hard to get some hardcoded files (which is not great). Afterwards do a yarn install and you should be good to go.
We intend to fix the hardcoded parts, but currently we are short on time.

mfavetti

mfavetti

2023-12-06 07:59

developer   ~78884

@p_teichmann
Okay, I followed your instructions. This is still not ideal. There are a lot changes to CSS replacing -webkit-margin-end and margin-inline-end with only margin-inline-end and other similar stuff. Also a ton of JS changes beyond what I touched.

Do you git add -p and only accept the modifications related to the changes to the base files? Or something like that?

I added a PR but I DO NOT think it should be merged as is. I added it mostly to get feedback on how to get the build to be correct.

Steps I used:

  1. Clean checkout of latest master
  2. rm -rf node_modules
  3. git reset --hard
  4. yarn install
  5. git apply issue19250.patch
  6. gulp build_survey_theme_ls6
  7. git add .
  8. git commit

Maybe I need to do git add -p . and only add the changes directly related to the patch????

p_teichmann

p_teichmann

2023-12-07 12:47

administrator   ~78911

It can happen if some of the node modules versions changed, i would not worry to much about this since it is only the build step and has pre-configured options which might affect how the compiled code looks in the end depending on global browser version usage.

The changes in the files are in line with what i would expect and also get myself locally.

Issue History

Date Modified Username Field Change
2023-11-18 08:20 mfavetti New Issue
2023-11-18 08:20 mfavetti Assigned To => mfavetti
2023-11-18 08:20 mfavetti Status new => assigned
2023-11-18 08:20 mfavetti Issue Monitored: mfavetti
2023-11-18 08:20 mfavetti Bug heat 0 => 2
2023-11-18 10:37 mfavetti Note Added: 78520
2023-11-18 10:37 mfavetti File Added: issue19250.patch
2023-11-18 10:37 mfavetti Bug heat 2 => 4
2023-11-18 10:37 mfavetti Assigned To mfavetti =>
2023-11-21 09:53 mfavetti Note Added: 78559
2023-11-21 10:28 p_teichmann Note Added: 78562
2023-11-21 10:28 p_teichmann Bug heat 4 => 6
2023-11-27 11:31 p_teichmann Note Edited: 78562
2023-11-27 12:11 DenisChenu Status assigned => confirmed
2023-12-06 07:59 mfavetti Note Added: 78884
2023-12-07 12:47 p_teichmann Note Added: 78911