View Issue Details

This bug affects 2 person(s).
 12
IDProjectCategoryView StatusLast Update
18716Bug reportsSurvey takingpublic2023-07-15 13:32
Reportertwilllig Assigned To 
PrioritynoneSeverityminor 
Status newResolutionopen 
Product Version5.6.x 
Summary18716: Font size in text inputs should be at least 16px for mobile phones
Description

If input fields have a fontsize below 16px, the whole page will be zoomed in on iOS Devices when the user focusses the field.

See here:
https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

So all surveythemes should have an extra CSS rule for mobile devices regarding fontsizes in those fields

Steps To Reproduce

Steps to reproduce

Open survey with long text question on an IPhone.
Click in text box to enter text.

Expected result

Page doesn't change zoom.

Actual result

Page got zoomed in. You have to manually zoom out to have the default view again.

TagsNo tags attached.
Bug heat12
Complete LimeSurvey version number (& build)5.6.14
I will donate to the project if issue is resolvedNo
Browsersafari
Database type & versionmySql
Server OS (if known)
Webserver software & version (if known)
PHP Version8.0.25

Users monitoring this issue

There are no users monitoring this issue.

Activities

DenisChenu

DenisChenu

2023-04-05 15:07

developer   ~74384

iOS have an issue then have a specific system for ios ?

But i'm for don't set any font-size : leave it at 100% for 1 rem, like BS5 if i don't make error.
Don't set font-size directly.

twilllig

twilllig

2023-04-05 15:23

developer   ~74385

Well, we discovered it today with LS5 which is obviously BS3 and this has 14px for .form-control class.

But also the new LS6 admin_theme is designed with 14px in input fields so there needs something to be done.
We weren't sure if it's a "bug" or a feature request. We first wanted it to be written down somewhere.

The whole topic is worthy for a discussion,
and keeping form-control fontsize of 1rem for the surveytaking part has now 2 votes (yours and mine) :)

If the whole thing is regarded as a bug, we should also fix it for LS5

DenisChenu

DenisChenu

2023-04-05 15:44

developer   ~74387

But also the new LS6 admin_theme is designed with 14px in input fields so there needs something to be done.

I have a font-size of 1rem here : https://getbootstrap.com/docs/5.3/forms/form-control/
Set as 16px by my browser.

It's not the default theme in BS docs (or Vanilla didn't use default theme) ?

If the whole thing is regarded as a bug, we should also fix it for LS5

Great

DenisChenu

DenisChenu

2023-04-05 15:44

developer   ~74388

DenisChenu

DenisChenu

2023-04-05 16:10

developer   ~74389

Last edited: 2023-04-05 16:11

OK , added html{font-size:14px} somewhere in Vanilla.

But we don't have vanilla generator, only LS team can fix it. (screenshot of https://getbootstrap.com/docs/5.3/forms/form-control/ against LimeSurvey/vanilla core theme

Mazi

Mazi

2023-07-15 13:32

updater   ~76099

We are facing the same issues. The survey turns out to be difficult to use e.g. on iPhones if the browser automatically zooms in on text fields.

Issue History

Date Modified Username Field Change
2023-04-05 13:54 twilllig New Issue
2023-04-05 15:07 DenisChenu Note Added: 74384
2023-04-05 15:07 DenisChenu Bug heat 0 => 2
2023-04-05 15:23 twilllig Note Added: 74385
2023-04-05 15:23 twilllig Bug heat 2 => 4
2023-04-05 15:44 DenisChenu Note Added: 74387
2023-04-05 15:44 DenisChenu Note Added: 74388
2023-04-05 15:44 DenisChenu File Added: Capture d’écran du 2023-04-05 15-43-28.png
2023-04-05 16:10 DenisChenu Note Added: 74389
2023-04-05 16:10 DenisChenu File Added: Capture d’écran du 2023-04-05 16-09-32.png
2023-04-05 16:10 DenisChenu File Added: Capture d’écran du 2023-04-05 16-09-49.png
2023-04-05 16:11 DenisChenu Note Edited: 74389
2023-07-15 13:32 Mazi Note Added: 76099
2023-07-15 13:32 Mazi Bug heat 4 => 12