オートコンプリートリストの候補

[Don]

こんにちは。

まず、新しいオートコンプリートのデザイン、本当に気に入っています。

サイトで使用しているものを少し変更しました。

1. モバイルではオートコンプリートリストを全幅で使用しています。これにより、リストが画面外に出るのを防ぐことができるため、安全な方法だと思います。中央付近に表示されます。ユーザーの名前が長い場合やユーザーのステータスが利用可能な場合に、より広い表示が可能になります。

.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // 左位置の計算を上書き
    }
  }
}

---

2. フェードアウトリストでは、リストがスクロール可能でなくても、下部の影とマージンが常に表示されます。影は -webkit-mask の代わりに :after 疑似要素として使用しています。最初と最後の li 要素の下にスライドする上下の影を追加しました。これにより、下部のマージンを削除できます。

.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;
    }
    // 影の上に配置
    &:first-of-type,
    &:last-of-type {
      .hashtag-autocomplete__link {
        position: relative;
        z-index: 1;
      }
    }
  }
}

[chapoi]

@Don

2. フェードアウトリストでは、リストがスクロール可能でなくても、下部の影とマージンが常に表示されます。影は-webkit-maskの代わりに:after疑似要素を使用しました。最初と最後のli要素の下にスライドする上下の影を追加しました。これにより、下部マージンを削除できます。

素晴らしい解決策ですね。実装します。