# Autocomplete list suggestions

**URL:** https://meta.discourse.org/t/autocomplete-list-suggestions/249658
**Category:** UX
**Tags:** hashtag-autocomplete
**Created:** [December 22, 2022, 11:20am UTC](https://meta.discourse.org/t/autocomplete-list-suggestions/249658 "2022-12-22T11:20:55Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 22, 2022, 11:20am UTC](https://meta.discourse.org/t/autocomplete-list-suggestions/249658/1 "2022-12-22T11:20:55Z")

</div>

Hello,

First of all thank you so much for the new autocomplete design I really love it. ❤

I made a little changes what I use on my site.

1. I use the autocomplete list full width on mobile. I think that is a safe thing now because it prevents the list to go out of the screen. It happens on somewhere center. It make a wider view which is good when user have a longer name or has user status available.

```scss
.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // override left position calculation
    }
  }
}

```

 ![Screenshot 2022-12-20 at 15.54.08](https://global.discourse-cdn.com/meta/original/4X/7/2/3/72342115ae83beaebb9bb08f95be64fc49fa16a0.png) ![Screenshot 2022-12-20 at 15.54.48](https://global.discourse-cdn.com/meta/original/4X/f/9/c/f9c33390be682ea2be4ff2c7d1f3da152ad5718b.png)

* * *

2. On the fadeout list the bottom shadow and margin always visible even if the list is not scrollable. I use the shadow to an :after pseudo instead of -webkit-mask. I added a top and bottom shadow which is slide under the first and last li element. This way I can remove the bottom margin.

```scss
.hashtag-autocomplete {
  max-height: 14em;
  &__fadeout {
    -webkit-mask: none;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 1.5em;
      background: linear-gradient(
        to bottom, 
        rgba(var(--secondary-rgb), 1), 
        rgba(var(--secondary-rgb), 0)
      );
    }
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 1.5em;
      background: linear-gradient(
        to bottom, 
        rgba(var(--secondary-rgb), 0), 
        rgba(var(--secondary-rgb), 1)
      );
    }
  }
  &__option {
    &:last-of-type {
      margin-bottom: 0;
    }
    // put it top of the shadows
    &:first-of-type,
    &:last-of-type {
      .hashtag-autocomplete__link {
        position: relative;
        z-index: 1;
      }
    }
  }
}

```

![hashtag](https://global.discourse-cdn.com/meta/original/4X/6/7/3/673b6842e0db351a105e211b61b7730314039142.gif)

 ![Screenshot 2022-12-22 at 11.05.38](https://global.discourse-cdn.com/meta/original/4X/6/5/2/652f82690452192f7a8cfb4d3328952f9cabd0d4.png)

 ![Screenshot 2022-12-22 at 11.06.14](https://global.discourse-cdn.com/meta/original/4X/8/9/a/89a4c33938724a921086250cc80d64e6f54d29d7.png)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 22, 2022, 7:55pm UTC](https://meta.discourse.org/t/autocomplete-list-suggestions/249658/4 "2022-12-22T19:55:56Z")

</div>

> [@Don](#):
>
> 1. On the fadeout list the bottom shadow and margin always visible even if the list is not scrollable. I use the shadow to an :after pseudo instead of -webkit-mask. I added a top and bottom shadow which is slide under the first and last li element. This way I can remove the bottom margin.

Love the solution; will implement. ❤