nextcloud/forms

Form input fields not working at screen width less than 512 px

bobbadshy opened this issue · 8 comments

bobbadshy commented

Please use the đź‘Ť reaction to show that you are affected by the same issue. Please don't comment if you have no relevant information to add!

Describe the bug
Form input fields stop working at screen width less than 512 px. Text entry fields cannot be selected anymore, dropdown lists will not appear. This renders forms unusable on small screens, namely on smartphones.

To Reproduce
Steps to reproduce the behavior:

  1. Create a test form with some text entry and dropdown answer lists.
  2. Open the form in view mode on a smartphone (or, enable device mode in browser dev tools and lower horizontal screen size to below 512 px, tested in Chrome dev tools)
  3. Entry fields become unresponsive.

Expected behavior
Form entry fields should stay responsive and usable at small horizontal reolutions.

Screenshots
Working at 512xp:
image

Not working at 511px:
image

Systeminfo:

2024-05-04.md

Nextcloud (please complete the following information):

  • Nextcloud-Version: 29.0.0.19
  • Forms-Version: 4.2.3

Desktop (please complete the following information):

  • OS: Linux
  • Browser Chrome
  • Version 123.0.6312.105

Smartphone (please complete the following information):

  • Device: Motorola g(7)
  • OS: [e.g. iOS8.1]
  • Browser Chrome
  • Version [e.g. 22]

Browser log

Dev tools show no log output when clicking entry fields.
How to access your browser console (Click to expand)

Chrome

  • Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.
  • Alternative method:
    1. Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
    2. Click the “console” tab.

Safari

  • Press CMD + ALT + I to open the Web Inspector.
  • See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)

IE9

  1. Press F12 to open the developer tools.
  2. Click the “console” tab.

Firefox

  • Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).
  • or, if Firebug is installed (recommended):
    1. Press F12 to open Firebug.
    2. Click on the “console” tab.

Opera

  1. Press CTRL + SHIFT + I to open Dragonfly.
  2. Click on the “console” tab.

Additional context
Add any other context about the problem here.

bobbadshy commented

While I am not primarily a JS or Vue developer, if you can point me to the source where this bug originates, I might even be able to propose a PR for it :).

Chartman123 commented

@susnux Is this a bug in the vue lib?

susnux commented

I do not think so as it works on the styleguide

tmlmt commented

I posted a similar but different issue in #2145: I can't edit forms on my mobile device.

This issue made me realize when I switch the device to landscape mode, things work (for issue 2145), but not in portrait mode.

There seems to be generally speaking quite some responsiveness issues on mobile devices? (editing, filling out, viewing, ...)

Chartman123 commented

@tmlmt So why do you think that your bug is different than this one here? It seems like this bug here is connected to the screen width (which in landscape mode is of course much bigger than in portrait mode).

Edit mode and submit mode both use the same input fields, so they are both probably connected. Could you please check if you also can't enter any input in submit mode and if it works in landscape mode?

sven-verkstedt commented

Awesome guys! Thx for the quick fix đź‘Ť :)

Chartman123 commented

@sven-verkstedt It will still take some time until the fix will be available... :)

  • đź‘Ť1
susnux commented

Release is scheduled for today of the library so we might be able to release an app update next week :)

  • đź‘Ť1