Autocomplete loading text overlaps long labels

Created on 22 February 2021, over 3 years ago
Updated 1 August 2024, 4 months ago

Problem/Motivation

Follow up to Issue #3116377
When autocomplete fields have long labels (or the viewport is just narrow), the loading text overlaps the label

Also, when autocomplete field has long input text, It overlaps the search icon.

Proposed resolution

Get rid of the "Loading" text altogether and swap the magnifying glass for a loading animation?

Remaining tasks

Add screenshots
Review code
Commit

User interface changes

todo

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro 

Last updated 1 day ago

Created by

🇬🇧United Kingdom justafish London, UK

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India gauravvvv Delhi, India

    1. Instead of padding-right: calc(7rem - 1px); we can use padding-inline-end which will work in both ltr & rtl direction.

    2. .js .form-autocomplete.is-autocompleting {background-position: 100% 75%;} This is outdated.

    3. .claro-autocomplete__message styling needs to refactored.

  • Status changed to Needs review almost 2 years ago
  • 🇮🇳India gauravvvv Delhi, India

    I have attached a patch for same, Updated the issue summary as well.

    please review

  • 🇮🇳India nayana_mvr

    Verified the patch #37 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screenshots of issue 1 and screen recordings of issue 2 for reference.

  • Status changed to Needs work almost 2 years ago
  • 🇺🇸United States smustgrave

    This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

    Number of patches here but not a lot of interdiffs. Please upload an interdiff with all your patches.

    Confirmed this issue on D10 using this label
    "Lorem ipsum dolor sit amet consectetur adipiscing elit, nunc facilisi porta risus quis cubilia ligula"

    #33 called for an IS update which still needs to happen.

    Proposed solution is still a question and as a UX issue this needs before/after screenshots.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 5.3 & MySQL 5.5
    last update 12 months ago
    Composer error. Unable to continue.
  • 🇮🇳India akashdab

    The second issue of tags overlapping with process icon does not seem to occur anymore. Link

Production build 0.71.5 2024