如何设置CSS自动完成框(ul)与搜索框(input)大小相同？

u5rb5r59 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(205)

如何解决顺风css的样式问题？
谁能告诉我为什么searchbox input和autocomplete条目ul的大小不同？这是我的代码，两个类都是w-full。

<div className="sticky top-20 z-40 w-full px-1 sm:p-5 md:p-10">
        <div className="gap-1">
          <form onSubmit={handleSearchClick} className="">
            {/* <SearchDropdown /> */}
            <input
              enterKeyHint="search"
              type="search"
              className={`w-full bg-white px-4 py-2 text-gray-700 ${
                autoResults.length > 0
                  ? "rounded-tl-3xl rounded-tr-3xl"
                  : "rounded-full"
              } z-10 border focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40`}
              placeholder="🔍 Search for products"
              onChange={handleInput}
              onClick={() => {
                setAutoResults(searchInput.length > 0 ? trackResults : []);
              }}
              value={searchInput}
            />
            {autoResults.length > 0 && (
              <ul className="absolute w-full rounded-bl-3xl rounded-br-3xl border-r border-l border-b bg-white focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40">
                {autoResults.map((result: any) => {
                  return (
                    <li
                      className=" cursor-pointer border-gray-300 p-2 px-4 text-gray-700 hover:bg-blue-400"
                      key={result._id}
                      // onClick={() => setSearchInput(result._id)}
                      onClick={() => handleSelect(result._id)}
                      // value={result._id}
                    >
                      {result._id}
                    </li>
                  );
                })}
              </ul>
            )}
          </form>
        </div>
     </div>

css

来源：https://stackoverflow.com/questions/74754814/how-to-set-css-auto-complete-box-ul-same-size-with-search-box-input-on-tailw

1条答案

按热度按时间

yhived7q1#

要将ul与overflowing分开，请尝试将relative类添加到form容器中，以便相对于form放置ul。
顺便说一句，也许可以考虑在ul中添加一个overflow-hidden，以便其背景色包含在圆形边框中。
下面是一个最小化的示例，没有任何功能，只有样式：stackblitz
示例：

<div className="sticky top-20 z-40 w-full px-1 sm:p-5 md:p-10">
  <div className="gap-1">
    {/* 👇 Add "relative" class here */}
    <form onSubmit={handleSearchClick} className="relative">
      {/* <SearchDropdown /> */}
      <input
        enterKeyHint="search"
        type="search"
        className={`w-full bg-white px-4 py-2 text-gray-700 ${
          autoResults.length > 0
            ? "rounded-tl-3xl rounded-tr-3xl"
            : "rounded-full"
        } z-10 border focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40`}
        placeholder="🔍 Search for products"
        onChange={handleInput}
        onClick={() => {
          setAutoResults(searchInput.length > 0 ? trackResults : []);
        }}
        value={searchInput}
      />
      {autoResults.length > 0 && (
        <ul className="overflow-hidden absolute w-full rounded-bl-3xl rounded-br-3xl border-r border-l border-b bg-white focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40">
          {/* 👆 Consider to add "overflow-hidden" class here */}
          {autoResults.map((result: any) => {
            return (
              <li
                className=" cursor-pointer border-gray-300 p-2 px-4 text-gray-700 hover:bg-blue-400"
                key={result._id}
                // onClick={() => setSearchInput(result._id)}
                onClick={() => handleSelect(result._id)}
                // value={result._id}
              >
                {result._id}
              </li>
            );
          })}
        </ul>
      )}
    </form>
  </div>
</div>

希望这会有帮助。

赞(0）回复(0）举报 2022-12-15

我来回答

如何设置CSS自动完成框(ul)与搜索框(input)大小相同？

1条答案

相关问题

热门标签

最新问答