admin管理员组

文章数量:1391956

I'm working on a chatbot (as a newbie) and work on UI (using Tailwindcss).
For a reason I understand (different behaviors), I do not know how to handle it. Any clue? Thanks.

On desktop textarea is 1 row (perfect!)

But on mobile (iOS), it looks like this ("two" lines):

My code is:

<body>
    <footer
      class="fixed bottom-0 left-1/2 w-full max-w-4xl -translate-x-1/2 transform bg-white shadow-[0_0_40px_40px_rgba(255,255,255,1)]"
    >
      <div
        class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
      >
        <textarea
          class="min-h-[24px] max-h-[240px] field-sizing-content flex-1 resize-none border-none text-base outline-0 placeholder:text-gray-400"
          id="prompt__input"
          type="text"
          name="message"
          placeholder="Comment puis-je vous aider ?"
        ></textarea>
        <button
          class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
          id="prompt__submit"
          type="button"
        >
          <svg
            class="fill-gray-600"
            aria-hidden="true"
            focusable="false"
            viewBox="0 0 16 16"
            width="22"
            height="22"
          >
            <path
              d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
            ></path>
          </svg>
        </button>
      </div>
    </footer>
</body>

I'm working on a chatbot (as a newbie) and work on UI (using Tailwindcss).
For a reason I understand (different behaviors), I do not know how to handle it. Any clue? Thanks.

On desktop textarea is 1 row (perfect!)

But on mobile (iOS), it looks like this ("two" lines):

My code is:

<body>
    <footer
      class="fixed bottom-0 left-1/2 w-full max-w-4xl -translate-x-1/2 transform bg-white shadow-[0_0_40px_40px_rgba(255,255,255,1)]"
    >
      <div
        class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
      >
        <textarea
          class="min-h-[24px] max-h-[240px] field-sizing-content flex-1 resize-none border-none text-base outline-0 placeholder:text-gray-400"
          id="prompt__input"
          type="text"
          name="message"
          placeholder="Comment puis-je vous aider ?"
        ></textarea>
        <button
          class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
          id="prompt__submit"
          type="button"
        >
          <svg
            class="fill-gray-600"
            aria-hidden="true"
            focusable="false"
            viewBox="0 0 16 16"
            width="22"
            height="22"
          >
            <path
              d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
            ></path>
          </svg>
        </button>
      </div>
    </footer>
</body>
  • css
  • tailwind-css
  • textarea
Share Improve this question edited Mar 13 at 23:33 Paulie_D 116k13 gold badges166 silver badges184 bronze badges asked Mar 13 at 23:05 charnouldcharnould 2,9394 gold badges24 silver badges31 bronze badges 2
  • did you try <textarea rows="1"> amongst the other properties? – IT goldman Commented Mar 13 at 23:22
  • @ITgoldman yes, it works but then field-sizing-content doesn’t work anymore – charnould Commented Mar 14 at 6:22
Add a comment  | 

1 Answer 1

Reset to default 1

Limited availability for field-sizing

  • field-sizing - MDN Docs
  • Browser Support - Can I Use?

It is not available on either Firefox or Safari, so you need to look for an alternative solution.

field-sizing utilities are not available in v3

Note: The field-sizing utilities was introduced in TailwindCSS v4. If you still want to use it with v3, you'll need to create your own custom class. (See more: PR #14469)

.field-sizing-content {
  field-sizing: content;
}
.field-sizing-fixed {
  field-sizing: fixed;
}

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.field-sizing-content' {
          'field-sizing': 'content';
        },
        '.field-sizing-fixed': {
          'field-sizing': 'fixed',
        },
      })
    })
  ]
}

Alternative: update height manually

Actually, I just inserted the original field-sizing solution and my new solution so that the results can be compared.

For the alternative solution, I set up a function on the textarea's input event that automatically adjusts the textarea's height to its scrollHeight, ensuring that the text will always be fully visible, with the max-h-[240px] acting as the constraint.

To ensure it works properly, the rows="1" setting is required to start with a single row by default, and an auto height setting is needed so that the scrollHeight actually starts decreasing when the content is deleted.

document.addEventListener("DOMContentLoaded", function () {
  const textarea = document.getElementById("prompt__input__alternative");
  
  // Update height to scrollHeight
  function updateHeight() {
    textarea.style.height = `auto`; /* for can reset height */
    textarea.style.height = `${textarea.scrollHeight}px`;
  }

  textarea.addEventListener("input", updateHeight);
  updateHeight();
});
<script src="https://unpkg/@tailwindcss/browser@4"></script>

<footer
  class="fixed bottom-0 left-1/2 w-full max-w-4xl -translate-x-1/2 transform bg-white shadow-[0_0_40px_40px_rgba(255,255,255,1)]"
>
  <p>Original with field-sizing-content</p>
  <div
    class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
  >
    <textarea
      class="min-h-[24px] max-h-[240px] field-sizing-content flex-1 resize-none border-none text-base outline-0 placeholder:text-gray-400"
      id="prompt__input"
      type="text"
      name="message"
      placeholder="Comment puis-je vous aider ?"
    ></textarea>
    <button
      class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
      id="prompt__submit"
      type="button"
    >
      <svg
        class="fill-gray-600"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 16 16"
        width="22"
        height="22"
      >
        <path
          d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
        ></path>
      </svg>
    </button>
  </div>

  <p>Alternative with JavaScript</p>
  <div
    class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
  >
    <textarea
      class="w-full min-h-[24px] max-h-[240px] h-auto resize-none border-none text-base outline-0 placeholder:text-gray-400"
      id="prompt__input__alternative"
      type="text"
      name="message"
      placeholder="Comment puis-je vous aider ?"
      rows="1"
    ></textarea>
    <button
      class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
      id="prompt__submit"
      type="button"
    >
      <svg
        class="fill-gray-600"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 16 16"
        width="22"
        height="22"
      >
        <path
          d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
        ></path>
      </svg>
    </button>
  </div>
</footer>

Alternative solution with contenteditable element

Actually, I just inserted the original field-sizing solution and my new solution so that the results can be compared.

The alternative solution works here even without JavaScript. The JavaScript is needed to hide and show the placeholder, and for that, I had to listen for the input event on the contenteditable div.

  • Source: Joe's solution with contenteditable span

document.addEventListener("DOMContentLoaded", function () {
  const contentEditableDiv = document.getElementById("prompt__input__alternative");
  const placeholderSpan = document.getElementById("primpt__input__alternative__placeholder");

  // Hide placeholder when input length > 0
  function togglePlaceholder() {
    if (contentEditableDiv.textContent.trim().length > 0) {
      placeholderSpan.style.display = "none";
    } else {
      placeholderSpan.style.display = "inline";
    }
  }

  contentEditableDiv.addEventListener("input", togglePlaceholder);
  togglePlaceholder();
});
<script src="https://unpkg/@tailwindcss/browser@4"></script>

<footer
  class="fixed bottom-0 left-1/2 w-full max-w-4xl -translate-x-1/2 transform bg-white shadow-[0_0_40px_40px_rgba(255,255,255,1)]"
>
  <p>Original with field-sizing-content</p>
  <div
    class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
  >
    <textarea
      class="min-h-[24px] max-h-[240px] field-sizing-content flex-1 resize-none border-none text-base outline-0 placeholder:text-gray-400"
      id="prompt__input"
      type="text"
      name="message"
      placeholder="Comment puis-je vous aider ?"
    ></textarea>
    <button
      class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
      id="prompt__submit"
      type="button"
    >
      <svg
        class="fill-gray-600"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 16 16"
        width="22"
        height="22"
      >
        <path
          d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
        ></path>
      </svg>
    </button>
  </div>

  <p>Alternative with contenteditable</p>
  <div
    class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
  >
    <div class="relative w-full min-h-[24px] max-h-[240px] overflow-auto">
      <span id="primpt__input__alternative__placeholder" class="w-full text-gray-400 absolute top-0 left-0 z-0">
        Comment puis-je vous aider ?
      </span>
      <div
        contenteditable="true"
        class="relative z-10 w-full min-h-[24px] max-h-[240px] border-none text-base outline-0"
        id="prompt__input__alternative"
      ></div>
    </div>
    <button
      class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
      id="prompt__submit"
      type="button"
    >
      <svg
        class="fill-gray-600"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 16 16"
        width="22"
        height="22"
      >
        <path
          d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
        ></path>
      </svg>
    </button>
  </div>
</footer>

本文标签： cssWhy a textarea is 1line on desktop and 2line on iOS (mobile)Stack Overflow

版权声明：本文标题：css - Why a textarea is 1-line on desktop and 2-line on iOS (mobile)? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744680560a2619380.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。