| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 19186 | Bug reports | Question editor | public | 2023-10-21 03:54 | 2023-10-26 09:03 |
| Reporter | modernity4r | Assigned To | |||
| Priority | none | Severity | minor | ||
| Status | confirmed | Resolution | open | ||
| Product Version | 6.2.x | ||||
| Summary | 19186: suffix-prefix-force didn't work good on little screeen | ||||
| Description | to display the answer prefix, text input box, and answer suffix on a single line on 'mobile phones' For example, if there is a question, "How old are you? (Please write in numbers)", one can design a display that includes a (years) suffix. On laptops and PCs, one can normally adjust the text input box width/size. However, on mobile phones, the answer prefix and answer suffix are placed above and below the text input box, regardless of the width/size adjustment. I'd like to display the answer prefix, text input box, and answer suffix on a single line, but it seems there's an exception on mobile phones. Is there a solution for this? | ||||
| Steps To Reproduce | Steps to reproduceImport limesurvey_survey_984269-suffix-prefix-force.lss survey Expected result(years) shown just right of input Actual result(years) shown far right of input | ||||
| Tags | No tags attached. | ||||
| Bug heat | 8 | ||||
| Complete LimeSurvey version number (& build) | 6.2.9+230925 (self-hosted) & 6.3 (cloud) | ||||
| I will donate to the project if issue is resolved | Yes | ||||
| Browser | Chrome (Android) / Safari (iOS) | ||||
| Database type & version | 10.6.12-MariaDB-0ubuntu0.22.04.1 | ||||
| Server OS (if known) | Ubuntu 22.04 (self_hosted) | ||||
| Webserver software & version (if known) | Apache/2.4.52 (Ubuntu) | ||||
| PHP Version | PHP 8.1.2-1ubuntu2.14 (cli) (built: Aug 18 2023 11:41:11) (NTS) | ||||
 |
I don't think this is a bug. The behavior of the theme is deliberate for small screens. To get the behavior you want, you only need a css change and you can do that by extending the survey theme. |
 |
No : it's a bug : it work good on big screen and small screen on 3.X and 5X Make mobile first are not break for big screen ! It's OK in 5 : it's an issue in 6. |
|
|
not sure i agree the css states that for all widths except for small screens (>481px), the display is on the same line for small screens it changes to separate lines, it's very clearly an intentional design decision. i think it is mobile first design. it's just this user has a different opinion on preferred display. also, behavior is the same in 5.x and master who is UI/UX specialist? they should weigh in... |
|
|
here is 5.x/master screenshot Screenshot 2023-10-23 020428.png (11,875 bytes) Screenshot 2023-10-23 020550.png (24,368 bytes) |
|
|
so the user wants all on one line for small screens, easily accomplished by extending theme and modifying css... its a question of UI/UX if we think that on small screens its better one line then we should change application, otherwise, user can have whatever behavior they want by modifying css or question theme. really depends on opinion of limesurvey UI/UX expert. |
|
|
Oh : you're right : sorry. |
|
|
Maybe : feature request : move this to theme.css ? and not to global survey.css ? |
|
|
There are an issue with suffix-prefix-force : https://github.com/LimeSurvey/LimeSurvey/blob/0b91e184629cb0655a5bea88b754093b7e7c0077/assets/packages/limesurvey/survey.css#L64
Capture d’écran du 2023-10-23 11-29-15.png (16,921 bytes) |
|
|
if the reporter just extend their theme and copy paste to custom.css and make changes they can achieve their desired functionality |
|
|
good catch! adding suffix-prefix-force class to question achieves desired behavior you're right needs to be documented |
|
|
Change to 19186: suffix-prefix-force didn't work good on little screeen |
|
|
this class affects prefix and suffix btw |
|
|
actually adding suffix-prefix-force to question classes solves the reporter's problem... |
|
|
with/without class in master Screenshot 2023-10-23 023751.png (23,872 bytes) Screenshot 2023-10-23 023828.png (24,476 bytes) |
|
|
actually is documented XD: https://manual.limesurvey.org/QS:Suffix |
|
|
@modernity4r if you add suffix-prefix-force to question classes, does it behave as desired? |
 |
I don't see why we would FORCE seperate lines, if the prefix / suffix fit on the same line. If there is enough space on the small screen, it makes total sense to have a prefix or a suffix or both on the same line as the text/number box. As soon as there is not enough space it should go to the next line. |
|
|
Because it can make unusable input Capture d’écran du 2023-10-23 17-34-40.png (19,957 bytes) |
|
|
No : there are no fixed "not enough space" … |
|
|
How about fluid design? Elements that don't fit on the same height, just go below... There should be a way to force a minimum size for the text / number box anyway. |
|
|
It's currently RWD … Else : if you set input size If you have a better idea : please propose a working solution in more condition. Capture d’écran du 2023-10-24 08-24-25.png (16,176 bytes) |
|
|
OK, Issue only when set a size to the input, and with big suffix and preffix (where it's better toi use included solution) |
|
|
My opinion : won't fix |
|
|
|
|
|
Capture d’écran du 2023-10-26 09-02-41.png (65,766 bytes) |
