প্রস্থ: <ইনপুট> ক্ষেত্রগুলির জন্য অটো

122

নবাগত সিএসএস প্রশ্ন। আমি ভেবেছিলাম width:autoএকটি display:blockউপাদানটির অর্থ 'উপলব্ধ স্থান পূরণ করুন'। তবে কোনও <input>উপাদানটির ক্ষেত্রে এটি মনে হয় না। উদাহরণ স্বরূপ:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

দুটি প্রশ্ন তখন:

ঠিক কোন প্রস্থের স্বয়ংক্রিয়র অর্থ আছে তার কোনও সংজ্ঞা আছে? সিএসএস অনুমানটি আমার কাছে অস্পষ্ট মনে হলেও প্রাসঙ্গিক বিভাগটি আমি মিস করেছি।
কোনও ইনপুট ক্ষেত্রের জন্য আমার প্রত্যাশিত আচরণ অর্জনের কোনও উপায় আছে - যেমন। অন্যান্য ব্লক স্তরের উপাদানগুলির মতো উপলব্ধ স্থান পূরণ করুন?

ধন্যবাদ!

css

— richb
সূত্র

প্রদর্শনের সাথে

— ফোগজ

@ ফ্রোগজ হ্যাঁ এটি একটি সদৃশ। আমি অনুসন্ধান করেছি কিন্তু এটি পেলাম না। ধন্যবাদ.

— ধনী

88

<input>এর sizeবৈশিষ্ট্য থেকে একটি এর প্রস্থ তৈরি করা হয় । ডিফল্ট sizeহ'ল অটো প্রস্থকে চালাচ্ছে।

আপনি width:100%নীচের আমার উদাহরণে চিত্রিত হিসাবে চেষ্টা করতে পারেন ।

প্রস্থ পূরণ করে না:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

প্রস্থ পূরণ করুন:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

ছোট আকার, ছোট প্রস্থ:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

হালনাগাদ

কয়েক মিনিটের পরে আমি যা করতে পারি তা এখানে সেরা। এটি এফএফ, ক্রোম এবং সাফারিতে 1px বন্ধ এবং আইইতে নিখুঁত। (সমস্যাটি হল # ^ & * আইই সকলের চেয়ে আলাদাভাবে সীমানা প্রয়োগ করে তাই এটি সামঞ্জস্যপূর্ণ নয়))

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— বেন
সূত্র

24

ধন্যবাদ। প্রস্থ: 100% একই জিনিস নয়। মার্জিন বা সীমানা থাকলে এটি প্যারেন্ট বক্সকে উপচে পড়বে।

— ধনী 2

1

আপনি কীভাবে চান তা সামঞ্জস্য করার জন্য আপনি সুস্পষ্টভাবে এগুলি সেট করতে পারেন, যেমন border:2px inset #eee; margin:-2px। যদিও এটি নিজেই পরীক্ষা করে দেখিনি those লাইন বরাবর কিছু।

— বেন

3

ধন্যবাদ স্টিভ আপনার স্ট্যাকওভারফ্লো / প্রশ্নগুলি পরীক্ষা করা উচিত 1030793/… যাতে আরও কিছু আকর্ষণীয় ধারণা রয়েছে।

— ধনী

1

ইনপুট ক্ষেত্রগুলিতে CSS এর মাধ্যমে ধারাবাহিক প্রস্থের এপিক সমাধান, +1

— স্টিফেন

11

সীমানাটিকে পাত্রে ওভারল্যাপিং করা থেকে বিরত রাখতে আপনি ইনপুট বাক্স-আকারের সম্পত্তি সীমান্ত-বাক্সে সেট করতে পারেন।

— নিকোলাস

26

"প্রস্থের ঠিক কীটির কোনও সংজ্ঞা আছে: অটো বলতে কী বোঝায়? সিএসএসের বিবরণটি আমার কাছে অস্পষ্ট মনে হয়, তবে সম্ভবত আমি প্রাসঙ্গিক বিভাগটি মিস করেছি।"

আসল পোস্টারের প্রশ্নের উপরের অংশটি আসলেই কেউ উত্তর দেয়নি।

উত্তরটি এখানে: http://www.456bereastreet.com/archive/201112/the_differences_between_withthauto_and_width100/

প্রস্থের মানটি যতক্ষণ অটো থাকে ততক্ষণ উপাদানটির ধারকগুলির চেয়ে প্রশস্ত না হয়ে অনুভূমিক মার্জিন, প্যাডিং এবং সীমানা থাকতে পারে ...

অন্যদিকে, আপনি যদি প্রস্থ নির্দিষ্ট করে থাকেন: 100%, উপাদানটির মোট প্রস্থ এটির ব্লক সমেত যে কোনও অনুভূমিক মার্জিন, প্যাডিং এবং সীমান্তের 100% হবে ... এটি আপনি যা চান তা হতে পারে, তবে সম্ভবত এটি তা নয় ।

পার্থক্যটি কল্পনা করতে আমি একটি উদাহরণ দিয়েছি: http://www.456bereastreet.com/lab/width-auto/

— প্রতিক্রিয়া
সূত্র

4

সুন্দর উত্তর / লিঙ্ক, আমি "বাক্স-আকারকরণ: সীমান্ত-বাক্স" সহ তৃতীয় উদাহরণটি রাখার পরামর্শ দিচ্ছি ...

— 23-18 এ 23-18

এটি কোনও

— ইনপুটটির

9

অন্য উত্তরে যেমন বলা হয়েছে, প্রস্থ: ইনপুট আকারের বৈশিষ্ট্য দ্বারা প্রস্থের প্রস্থের কারণে অটো কাজ করে না, যা "অটো" বা অনুরূপ কিছুতে সেট করা যায় না।

বক্স মডেলটির সাথে এটি সুন্দরভাবে খেলতে আপনার ব্যবহার করতে পারেন এমন কয়েকটি কাজের ক্ষেত্র রয়েছে, তবে যতদূর জানি আমি তেমন চমকপ্রদ কিছু না nothing

প্রথমে আপনি শতকরা ব্যবহার করে ক্ষেত্রের প্যাডিং সেট করতে পারেন, প্রস্থটি 100% পর্যন্ত যুক্ত করেছে কিনা তা নিশ্চিত করে:

input {
  width: 98%;
  padding: 1%;
}

আপনি চেষ্টা করতে পারেন এমন অন্য একটি জিনিসটি বাম এবং ডানদিকে 0 সেট করে নিখুঁত অবস্থান ব্যবহার করছে mark এই মার্কআপটি ব্যবহার করে:

<fieldset>
    <input type="text" />
</fieldset>

এবং এই সিএসএস:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

এই নিখুঁত অবস্থানের ফলে ইনপুটটির প্যাডিং বা মার্জিন নির্বিশেষে অনুভূমিক ক্ষেত্রটি আনুভূমিকভাবে পূরণ করতে পারে। তবে এর একটি বিশাল ক্ষয়ক্ষতি হ'ল আপনাকে এখন ফিল্ডসেটের উচ্চতা মোকাবেলা করতে হবে, এটি সেট না করা হলে 0 হবে। যদি আপনার ইনপুটগুলি একই উচ্চতা হয় তবে এটি আপনার জন্য কাজ করবে, কেবল ইনপুটটির উচ্চতা যেটি হওয়া উচিত সেটাকে ক্ষেত্রের উচ্চতা নির্ধারণ করুন।

এগুলি ছাড়াও কিছু জেএস সমাধান রয়েছে তবে আমি জেএসের সাথে বেসিক স্টাইলিং প্রয়োগ করতে পছন্দ করি না।

— জন রাশ
সূত্র

8

কারণ inputএর widthএটা দ্বারা নিয়ন্ত্রিত হয় sizeঅ্যাট্রিবিউট, এই আমি আরম্ভ একটি input widthএর বিষয়বস্তু অনুযায়ী:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— ফাবৃকীয়
সূত্র

1

যদিও এই #angularনির্দিষ্ট উত্তরটি ওপি-র প্রশ্নের বৈধ উত্তর নয় (এবং আমি উত্সাহ দিচ্ছি না), আমি কেবল এই বিশেষ ধারণাটি খুঁজতে এই বিষয়ে এসেছি।

— nobug

5

আপনি যা চান ঠিক তেমনটি নাও হতে পারে তবে আমার কাজটি হ'ল একটি মোড়ক ডিভিতে স্বতঃসিদ্ধ স্টাইলিং প্রয়োগ করা - তবে আপনার ইনপুটটি 100% এ সেট করুন।

— mwilcox
সূত্র

0

আমি ভাবতে পারি একমাত্র বিকল্পটি ব্যবহার করা width:100%। আপনি যদি ইনপুট ফিল্ডেও প্যাডিং রাখতে চান তবে কেবল তার labelচারপাশে একটি ধারক রাখুন, পরিবর্তে সেই লেবেলে ফর্ম্যাটিংটি সরান, পাশাপাশি লেবেলে প্যাডিং নির্দিষ্ট করুন। ইনপুট ক্ষেত্রগুলি অনমনীয়।

— লাজোস মেসারোস
সূত্র

0

উত্তর 1 - "প্রতিক্রিয়া" এর জন্য একটি দুর্দান্ত উত্তর / লিঙ্ক দিয়েছে। এটিকে সংক্ষেপে বলতে গেলে "অটো" ডিফল্ট, সুতরাং এটি কোনও উপাদানের প্রস্থের যে কোনও পরিবর্তন সরিয়ে দেওয়ার মতো

উত্তর 2 - width: 100%পরিবর্তে ব্যবহার করুন। এটি প্যারেন্ট পাত্রে 100% পূরণ করবে, এক্ষেত্রে "ফর্ম"।

— আখিল গুপ্ত
সূত্র

-4

একটি নিখুঁত আশ্চর্যজনক বৈশিষ্ট্য বর্ণিত একেবারে আশ্চর্যজনক লিঙ্কগুলি:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

সারকথা:

সঙ্গে একটি পাত্রে উপাদান রাখুন display: flex;।
flex-grow: 1;প্রতিটি অন্তর্ভুক্ত উপাদান সেট করুন।
আপনার যদি সেই সমন্বিত উপাদানগুলির মধ্যেও উপাদান থাকতে থাকে যাগুলিও বাড়তে থাকে তবে উপস্থিত উপাদানগুলি এবং তাদের (অন্তর্ভুক্ত) শিশু উপাদানগুলির জন্য 1 এবং 2 পদক্ষেপ পুনরাবৃত্তি করুন।
বিভিন্ন প্রয়োজন অনুযায়ী সংযোজন এবং সামঞ্জস্য করুন (লিঙ্কগুলি দেখুন)।

সম্পাদনা করুন - উদাহরণ :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— অ্যান্ড্রু
সূত্র

কীভাবে ইনপুটগুলির জন্য অটো-প্রস্থের সাথে এটি সহায়তা করছে?

— কার্নেল

পছন্দ করুন উদাহরণ দেখুন।

— অ্যান্ড্রু

ইনপুটটির প্রস্থ সর্বদা 100% এবং সর্বনিম্ন সম্ভবও নয়।

— কার্নেল

2

ইনপুটটি এখনও তার সামগ্রীর মতো একই প্রস্থ নয়, যা ছিল প্রশ্ন।

— কার্নেল

আপনি যদি স্বীকৃত - এবং অন্য সবারও পড়েন - উত্তর দিন এটি কিছু আলাদা করে। তাহলে প্রশ্নটি হবে "আপনি কী করছেন ঠিক যে সবাই ভুল করছে?"

— কার্নেল