Skip to content

field-sizing Property

အသုံးပြုပုံ

field-sizing property ဟာ input, textarea နဲ့ select element တွေရဲ့ အရွယ်အစားကို သူတို့ရဲ့ content ပေါ်မူတည်ပြီး ပြောင်းလဲပေးပါတယ်။

fixed: (Default) ပုံသေ အရွယ်အစား (အရင်လိုပဲ)။
content: အတွင်းက စာသား (Content) အနည်းအများပေါ် မူတည်ပြီး ကြီးမယ်၊ သေးမယ်။

textarea {
  /* စာရိုက်လိုက်ရင် အောက်ကို ရှည်ထွက်လာမယ် */
  field-sizing: content;

  /* အနည်းဆုံးနဲ့ အများဆုံး အမြင့် သတ်မှတ်ပေးသင့်ပါတယ် */
  min-height: 40px;
  max-height: 200px;
}

input[type="text"] {
  /* စာရိုက်ရင် ဘေးကို ရှည်ထွက်လာမယ် */
  field-sizing: content;
  min-width: 100px;
}

ဘာတွေ ကောင်းသွားလဲ?

Performance: JavaScript event listener တွေ မလိုတော့လို့ ပိုမြန်တယ်။
UX: User က စာရိုက်နေရင်း scroll bar ပေါ်လာတာမျိုး မကြုံရတော့ဘူး။
Simplicity: Code တစ်ကြောင်းတည်းနဲ့ ပြီးတယ်။