ফর্ম ফিল্ড অটোমেটিক কন্টেন্ট ফিট করে

ডিফল্ট হিসেবে, <input>, <textarea> ও <select>-এর মতো ফর্ম কন্ট্রোলের নির্দিষ্ট ডাইমেনশন থাকে। ব্যবহারকারী যত পরিমাণ কন্টেন্টই লিখুন বা বেছে নিন না কেন, এগুলির সাইজ একই থাকে।

এইসব কন্ট্রোলকে অটোমেটিক ছোট বা বড় করে কন্টেন্টের (প্লেসহোল্ডার সহ) সাথে ফিট করতে field-sizing: content CSS প্রপার্টি ব্যবহার করুন।

অটোমেটিক আকারে ফর্ম কন্ট্রোল

ইনপুট, বেছে নেওয়া বা টেক্সট এরিয়াতে field-sizing: content সেট করলে, ব্যবহারকারী টাইপ বা বিকল্প বেছে নেওয়ার সময় সেগুলি ডায়নামিকভাবে ছোট বড় করা যায়। তবে, ব্যবহারকারীকে আরও ভাল অভিজ্ঞতা দিতে আপনাকে ইনহেরিট করা স্টাইলিং, লেআউট ডিফল্ট এবং ন্যূনতম/সর্বাধিক সীমাবদ্ধতা বিবেচনা করতে হবে।

লেআউট সংক্রান্ত সমস্যা এড়াতে, টেক্সট ইনপুটে field-sizing: content-এর পাশাপাশি min-inline-size (বা min-width) এবং max-inline-size (বা max-width) দুটিই সেট করার সাজেশন দেওয়া হয়। ন্যূনতম সাইজ ইনপুটকে খালি থাকার সময় শূন্য প্রস্থে ভেঙে যাওয়া থেকে বাধা দেয় (এটিকে ক্লিক করা যায় না) এবং সর্বাধিক সাইজ নিশ্চিত করে যে এটি অনির্দিষ্টকালের জন্য প্রসারিত হবে না এবং পৃষ্ঠার লেআউটকে ভেঙে দেবে না।

টেক্সট এরিয়ার ক্ষেত্রে, অনুভূমিক অটো-সাইজিংয়ের অনুমতি দিলে তা UX-এর উপর খারাপ প্রভাব ফেলতে পারে (যেমন, দীর্ঘ প্লেসহোল্ডার সহ একটি টেক্সট এরিয়া অনুভূমিকভাবে হঠাৎ সঙ্কুচিত হয়ে যাবে যখন ব্যবহারকারী একটি অক্ষর টাইপ করবেন)। এটি এড়াতে, টেক্সট এরিয়াতে একটি নির্দিষ্ট প্রস্থ (যেমন width: 100%) প্রয়োগ করুন। এটি টেক্সট এরিয়াকে একটি স্থিতিশীল অনুভূমিক প্রস্থ বজায় রাখতে বাধ্য করে এবং কন্টেন্ট র‍্যাপ করার সাথে সাথে উল্লম্বভাবে অটো-সাইজ করে।

<select> এলিমেন্টে field-sizing: content ব্যবহার করে max-inline-size (বা max-width) সেট করার সাজেশন দেওয়া হয় যাতে অত্যন্ত দীর্ঘ বেছে নেওয়া বিকল্প পৃষ্ঠার লেআউটকে ভেঙে না দেয়।

/* Applies horizontal auto-sizing to inputs */
input {
  /* Instructs the element to size itself to fit its content */
  field-sizing: content;

  /* Reset explicit width if inherited from global styles */
  width: auto;

  /* Prevents the input from collapsing and disappearing when empty */
  min-inline-size: 15ch;

  /* Prevents infinite horizontal growth */
  max-inline-size: 50ch;
}

textarea {
  /* Instructs the element to size itself to fit its content */
  field-sizing: content;

  /* Reset explicit height if inherited from global styles */
  height: auto;

  /* Use a fixed width to prevent jarring horizontal shifts when replacing a long placeholder */
  width: 50ch; /* or 100% depending on your layout */

  /* Sets a reasonable minimum height (e.g., 3 lines) for empty textareas */
  min-block-size: 3lh;

  /* Prevents infinite vertical growth. Once a textarea hits this */
  /* height, it will stop growing and show a vertical scrollbar. */
  max-block-size: 10lh;
}

select {
  /* Sizes the select element to fit the active option only */
  field-sizing: content;

  /* Prevents the dropdown from expanding infinitely and breaking the layout */
  max-inline-size: 50ch;
}

গুরুত্বপূর্ণ: এক্সপ্লিসিট width এবং height প্রপার্টি সব ফর্ম কন্ট্রোলে field-sizing: content ওভাররাইড করে। আপনার প্রোজেক্টের গ্লোবাল CSS যদি ইনপুট, সিলেক্ট বা টেক্সট এরিয়া width: 100%-এ সেট করে, তাহলে অটো-সাইজিং কাজ করার জন্য আপনাকে অবশ্যই এলিমেন্টে field-sizing: content ব্যবহার করে সেগুলিকে width: auto (বা width: fit-content)-এ স্পষ্টভাবে রিসেট করতে হবে। অন্যদিকে, আগে থেকে গ্লোবালি নির্দিষ্ট উচ্চতা সেট করা থাকলে, আপনাকে টেক্সট এরিয়াতে স্পষ্টভাবে height: auto সেট করতে হবে।

গুরুত্বপূর্ণ: গ্রিড ও ফ্লেক্সবক্স লেআউট প্রায়ই তাদের চাইল্ড এলিমেন্টকে উপলভ্য স্পেস পূরণ করার জন্য প্রসারিত করে। field-sizing: content ব্যবহার করে কোনও ফর্ম কন্ট্রোল সঙ্কুচিত হতে না চাইলে, এর কন্টেনারের অ্যালাইনমেন্ট প্রপার্টি চেক করুন এবং স্ট্রেচিং ওভাররাইড করতে ফর্ম কন্ট্রোলে align-self: start বা justify-self: start প্রয়োগ করুন।

ফলব্যাক স্ট্র্যাটেজি

field-sizing-কে প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে বিবেচনা করা উচিত। যেসব ব্রাউজারে এই প্রপার্টি কাজ করে না, সেখানে ফর্ম কন্ট্রোল ডিফল্ট, নির্দিষ্ট সাইজ দেখানোর আচরণে ফিরে যায়। নির্দিষ্ট সাইজের ইনপুট ও টেক্সট এরিয়াতে উপচে পড়া কন্টেন্টের জন্য ব্যবহারকারীরা স্ট্যান্ডার্ড স্ক্রলিংয়ের অভিজ্ঞতা পাবেন।

পুরনো ব্রাউজারের জন্য ডায়নামিকভাবে বাড়তে থাকা ফিল্ডের প্রয়োজন হলে, আপনাকে অবশ্যই ফিচার শনাক্তকরণ ও জটিল সমাধান ব্যবহার করতে হবে। টেক্সটএরিয়ার জন্য সবচেয়ে শক্তিশালী ফলব্যাক CSS গ্রিড ট্রিক ব্যবহার করে যেখানে একটি লুকানো ছদ্ম-এলিমেন্ট রিয়েল-টাইমে ব্যবহারকারীর ইনপুট মিরর করে, গ্রিড কন্টেনার (এবং এর মধ্যে থাকা টেক্সটএরিয়া) প্রসারিত করতে বাধ্য করে।

<!-- The textarea is wrapped in a container that will mirror its value -->
<div class="growable-textarea" data-replicated-value="">
  <textarea></textarea>
</div>

// Only attach the fallback event listeners if field-sizing is unsupported
if (!CSS.supports('field-sizing', 'content')) {
  document.querySelectorAll('.growable-textarea > textarea').forEach(textarea => {
    textarea.addEventListener('input', () => {
      textarea.parentNode.dataset.replicatedValue = textarea.value;
    });
  });
}

/* Only apply the fallback if field-sizing is NOT supported */
@supports not (field-sizing: content) {
  .growable-textarea {
    display: grid;
  }

  /* The pseudo-element and textarea must share the exact same cell, font, and padding */
  .growable-textarea::after,
  .growable-textarea > textarea {
    grid-area: 1 / 1 / 2 / 2;
    font: inherit;
    padding: 0.5rem;
    border: 1px solid #999;
  }

  /* The pseudo-element renders the copied text invisibly to stretch the grid */
  .growable-textarea::after {
    /* The space is necessary for trailing empty lines to be rendered */
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
  }

  .growable-textarea > textarea {
    resize: none;
    overflow: hidden;
  }
}

প্রতিটি ফর্ম কন্ট্রোলের জন্য DOM নোড জুড়ে স্টাইল ডুপ্লিকেট করা এবং স্টেট সিঙ্ক করার জটিলতার কারণে, বেশিরভাগ অ্যাপ্লিকেশনের জন্য ফিক্সড ইনপুটের ডিফল্ট ফলব্যাক আচরণের উপর নির্ভর করা হল সাজেস্ট করা পদ্ধতি, যদি না ডাইনামিক সাইজিং ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ হয়।