nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcActions] Hover an action causes popover to resize and jump

Open
#7,959 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

Reported by @anythingtodaynet in https://github.com/nextcloud/server/issues/56874
Original report:

Bug description

Encountered in Forms, but can be seen elsewhere.

When clicking on the meatball menu close to the middle of the screen, it tends to "jump up and down" on hovering the options.

https://github.com/user-attachments/assets/8bb1a860-0e3c-4ea7-9a11-2cd2b94b13a7

Steps to reproduce
  1. Edit a Form
  2. Click on the meatball menu around middle-height
  3. Hover on options
Expected behavior

Meatball menu should stay fixed.

Nextcloud Server version

31

Configuration report
{
    "system": {
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "***REMOVED SENSITIVE VALUE***"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "mysql",
        "version": "31.0.9.1",
        "overwrite.cli.url": "https:\/\/***REMOVED SENSITIVE VALUE***",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "log_type": "file",
        "logfile": "\/var\/log\/nextcloud\/***REMOVED SENSITIVE VALUE***\/nextcloud.log",
        "redis": {
            "host": "***REMOVED SENSITIVE VALUE***",
            "port": "6379",
            "password": "***REMOVED SENSITIVE VALUE***",
            "dbindex": 0,
            "timeout": 0
        },
        "skeletondirectory": "",
        "logtimezone": "Europe\/Paris",
        "updater.release.channel": "stable",
        "default_language": "fr",
        "default_locale": "FR",
        "default_phone_region": "FR",
        "defaultapp": "dashboard",
        "share_folder": "Partag\u00e9s avec moi",
        "trashbin_retention_obligation": "60,80",
        "versions_retention_obligation": "auto,60",
        "check_for_working_wellknown_setup": true,
        "quota_include_external_storage": false,
        "cron_log": true,
        "has_internet_connection": true,
        "updatechecker": true,
        "upgrade.disable-web": true,
        "appstoreenabled": true,
        "filelocking.enabled": true,
        "session_keepalive": true,
        "knowledgebaseenabled": true,
        "allow_user_to_change_display_name": false,
        "enable_previews": true,
        "enable_avatars": true,
        "auth.bruteforce.protection.enabled": true,
        "auth.webauthn.enabled": false,
        "allow_local_remote_servers": false,
        "loglevel": 1,
        "log_rotate_size": 104857600,
        "session_lifetime": 86400,
        "remember_login_cookie_lifetime": 1296000,
        "preview_max_filesize_image": 50,
        "activity_expire_days": 120,
        "maintenance_window_start": 1,
        "memcache.local": "\\OC\\Memcache\\APCu",
        "memcache.locking": "\\OC\\Memcache\\Redis",
        "memcache.distributed": "\\OC\\Memcache\\Redis",
        "app_install_overwrite": [
            "admin_audit"
        ],
        "maintenance": false,
        "mail_smtpmode": "smtp",
        "mail_smtpauth": 1,
        "mail_sendmailmode": "smtp",
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpport": "587",
        "mail_smtpname": "***REMOVED SENSITIVE VALUE***",
        "mail_smtppassword": "***REMOVED SENSITIVE VALUE***",
        "profile.enabled": false,
        "simpleSignUpLink.shown": false,
        "forbidden_filename_basenames": [
            "con",
            "prn",
            "aux",
            "nul",
            "com0",
            "com1",
            "com2",
            "com3",
            "com4",
            "com5",
            "com6",
            "com7",
            "com8",
            "com9",
            "com\u00b9",
            "com\u00b2",
            "com\u00b3",
            "lpt0",
            "lpt1",
            "lpt2",
            "lpt3",
            "lpt4",
            "lpt5",
            "lpt6",
            "lpt7",
            "lpt8",
            "lpt9",
            "lpt\u00b9",
            "lpt\u00b2",
            "lpt\u00b3"
        ],
        "forbidden_filename_characters": [
            "<",
            ">",
            ":",
            "\"",
            "|",
            "?",
            "*",
            "\\",
            "\/"
        ],
        "forbidden_filename_extensions": [
            " ",
            ".",
            ".filepart",
            ".part"
        ],
        "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
        "memories.db.triggers.fcu": true,
        "memories.exiftool_no_local": true,
        "memories.vod.path": "\/var\/www\/html\/nextcloud\/***REMOVED SENSITIVE VALUE***\/apps\/memories\/bin-ext\/go-vod-amd64",
        "trusted_proxies": "***REMOVED SENSITIVE VALUE***",
    }
}
List of activated Apps
Enabled:
  - activity: 4.0.0
  - admin_audit: 1.21.0
  - announcementcenter: 7.2.2
  - app_api: 5.0.2
  - bruteforcesettings: 4.0.0
  - calendar: 5.5.9
  - circles: 31.0.0
  - cloud_federation_api: 1.14.0
  - comments: 1.21.0
  - contacts: 7.3.8
  - contactsinteraction: 1.12.0
  - dashboard: 7.11.0
  - dav: 1.33.0
  - deck: 1.15.5
  - external: 6.0.2
  - federatedfilesharing: 1.21.0
  - files: 2.3.1
  - files_accesscontrol: 2.0.3
  - files_downloadlimit: 4.0.0
  - files_linkeditor: 1.1.23
  - files_lock: 31.0.3
  - files_pdfviewer: 4.0.0
  - files_reminders: 1.4.0
  - files_retention: 2.0.1
  - files_sharing: 1.23.1
  - files_trashbin: 1.21.0
  - files_versions: 1.24.0
  - forms: 5.2.3
  - groupfolders: 19.1.10
  - impersonate: 2.0.0
  - intros: 1.2.1
  - logreader: 4.0.0
  - lookup_server_connector: 1.19.0
  - memories: 7.6.2
  - nextcloud_announcements: 3.0.0
  - notes: 4.12.4
  - notifications: 4.0.0
  - notify_push: 1.2.1
  - oauth2: 1.19.1
  - onlyoffice: 9.11.0
  - password_policy: 3.0.0
  - picker: 1.0.13
  - profile: 1.0.0
  - provisioning_api: 1.21.0
  - recommendations: 4.0.0
  - related_resources: 2.0.0
  - serverinfo: 3.0.0
  - settings: 1.14.0
  - sharebymail: 1.21.0
  - support: 3.0.0
  - systemtags: 1.21.1
  - text: 5.0.0
  - theming: 2.6.1
  - twofactor_backupcodes: 1.20.0
  - updatenotification: 1.21.0
  - viewer: 4.0.0
  - webhook_listeners: 1.2.0
  - workflow_pdf_converter: 2.0.0
  - workflowengine: 2.13.0
Additional info

It seems to be CSS problem, related to .action-input__input-container that is 42 px and switches to 40 px when :hovered (which can change the popup menu’s height).
.input-field__main-wrapper has a 1x padding on each sides, seems to be removed on hover.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Search the component styles for .action-input__input-container and .input-field__main-wrapper, then reproduce the Forms meatball-menu behavior by hovering its options near the middle of the screen. Confirm that the hover state no longer changes the menu dimensions and that the popover stays fixed while moving across options.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.