স্টাইল ইনপুট উপাদানটির ধারকটির অবশিষ্ট প্রস্থ পূরণ করতে

Question

ধরা যাক আমার কাছে এইচটিএমএল স্নিপেট রয়েছে:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

এটি আমার সঠিক কোড নয়, তবে গুরুত্বপূর্ণ বিষয়টি হ'ল স্থির-প্রস্থের ধারকটিতে একই লাইনে একটি লেবেল এবং একটি পাঠ্য ইনপুট রয়েছে। মোড়ানো না হয়ে এবং লেবেলের আকারটি না জেনে আমি কীভাবে ধারকটির অবশিষ্ট প্রস্থ পূরণ করতে ইনপুটটি স্টাইল করতে পারি?

Comments

আমি জানি প্রশ্নটি অনেক আগে হয়েছিল তবে আমি ভাল সমাধান যুক্ত করব যা অবশ্যই পুরানো নয়।

— দঞ্জির

Answer 1

লেআউটটির জন্য প্রত্যেকে যতটা টেবিলকে ঘৃণা করে, তারা এ জাতীয় স্টাফগুলিতে স্পষ্টত সারণী ট্যাগ ব্যবহার করে বা প্রদর্শন ব্যবহার করে সাহায্য করে: সারণী-ঘর

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Comments

এই আই 6 সঙ্গে কাজ করবে? অন্যথায় আমাকে আসলে

— এটির

নিশ্চিত নয়, আমি বলব তারা কী করে তাড়াতাড়ি পরীক্ষা করে দেখুন, তবে আইই

— তে

এটি ঠিক আছে: এটি আমাকে কাজ করে এমন কিছু দিকে নির্দেশ করে।

— জোয়েল কোহোর্ন

জোয়েল ভাগ করে নেওয়ার যত্ন?

— জন

সম্মত, আপনার প্রকৃত সমাধানটি আমাদের বাকী অংশের সাথে ভাগ করে নেওয়া উচিত , এবং পরিবর্তে উত্তর হিসাবে চিহ্নিত করুন - যেমনটি হ'ল বিরক্তিজনক।

— BrainSlugs83

Answer 2

এখানে জাভাস্ক্রিপ্ট বা টেবিল বিন্যাস হ্যাক ব্যবহার না করে একটি সহজ এবং পরিষ্কার সমাধান রয়েছে। এটি এই উত্তরের অনুরূপ: অন্যান্য উপাদানগুলির সাথে ভাসমান ইনপুট পাঠ্য অটো প্রস্থ 100% পূরণ করে

এটা একটা বিঘত হয় যা দিয়ে ইনপুট ক্ষেত্র মোড়ানো গুরুত্বপূর্ণ display:block। পরবর্তী জিনিসটি হ'ল বোতামটি প্রথমে আসতে হবে এবং দ্বিতীয় ইনপুট ফিল্ডটি আসতে হবে।

তারপরে আপনি ডানদিকে বোতামটি ভাসাতে পারবেন এবং ইনপুট ক্ষেত্রটি অবশিষ্ট স্থানটি পূরণ করবে।

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

একটি সরল বেড়া: http://jsfiddle.net/v7YTT/90/

আপডেট 1: যদি আপনার ওয়েবসাইটটি কেবল আধুনিক ব্রাউজারগুলির দিকে লক্ষ্য করা থাকে তবে আমি নমনীয় বাক্সগুলি ব্যবহার করার পরামর্শ দিই । এখানে আপনি বর্তমান সমর্থন দেখতে পারেন ।

আপডেট 2: এটি একাধিক বোতাম বা অন্যান্য উপাদানগুলির সাথেও কাজ করে যা সম্পূর্ণ ইনপুট ক্ষেত্রের সাথে ভাগ করে। এখানে একটি উদাহরণ ।

Comments

এটি এইচটিএমএল পরিবর্তন করে যদিও: শেষে আপনি যে আইটেমটি চান তা প্রথমে এইচটিএমএলে তালিকাভুক্ত করা হয়েছে।

— জোয়েল কোহোর্ন

@ জোয়েলকোহুর্ন, ঠিক আছে আপনি কোনও টেবিল ব্যবহারের চেয়ে বেশি পছন্দ করেন কিনা তা আপনার সিদ্ধান্ত।

— দঞ্জির

এটি দুর্দান্ত কাজ করে। ফেসবুক স্টাইল ট্যাগার বা অনুরূপ কিছু তৈরি করতে ডান পরিবর্তে বাম ব্যবহার করুন:

— হোবারউইকি

এটি দুর্দান্ত কাজ করে! কিন্তু কেউ কীভাবে এটি কাজ করে তার পিছনে যুক্তি ব্যাখ্যা করতে পারে ?!

— শার্লক

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

— রজার হিল

Answer 3

আমি ফ্লেক্সবক্স ব্যবহার করার পরামর্শ দিচ্ছি:

যদিও যথাযথ বিক্রেতার উপসর্গ যুক্ত করতে ভুলবেন না!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Comments

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

— জোয়েল কোহোর্ন

আপনি একটি ব্যবহার করে একটি উদাহরণ প্রদান করতে পারেন label? আমি বিশেষভাবে আগ্রহী হব যে কীভাবে মূল প্রশ্ন থেকে এইচটিএমএলটি ব্যবহার করে সাজানো যেতে পারে border-box...

— ল্যাকো

কেন flex: 2এবং না flex: 1?

— আইলিয়াস কার্ট

Answer 4

এর জন্য দয়া করে ফ্লেক্সবক্স ব্যবহার করুন। আপনার কাছে এমন একটি ধারক রয়েছে যা তার বাচ্চাদের একটি সারিতে ফ্লেক্স করতে চলেছে। প্রথম শিশুটি প্রয়োজনীয়ভাবে তার স্থান নেয়। দ্বিতীয়টি বাকী সমস্ত স্থান গ্রহণের জন্য নমনীয় করে তোলে:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Comments

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

— জেড

ফ্লেক্স-দিকনির্দেশটি ইতিমধ্যে rowডিফল্ট হিসাবে রয়েছে, আপনাকে এটি নির্দিষ্ট করতে হবে না।

— ফ্যাবিয়ান পিকন

জয়ের জন্য ফ্লেক্স (আবার); 2019

— সিক্রেটওয়েপ

Answer 5

এটি অর্জনের সবচেয়ে সহজ উপায় হ'ল:

সিএসএস:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

এইচটিএমএল:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

দেখে মনে হচ্ছে: http://jsfiddle.net/JwfRX/

Comments

এটি আমার পক্ষে ভাল কাজ করে। ওভারফ্লো জিনিস মোড়ানো থেকে বাঁচায়, প্যাডিং-ডানদিকে ডান দিকটি কেটে ফেলা থেকে রক্ষা করে।

— অধ্যাপক ভন লেমনগারগল

পিএস: আধুনিক ব্রাউজারের সাথে আমি

— লেশম্যানের

Answer 6

খুব সহজ কৌশলটি একটি CSS calcসূত্র ব্যবহার করছে । সমস্ত আধুনিক ব্রাউজার, আই 9, বিস্তৃত মোবাইল ব্রাউজারগুলির এটিকে সমর্থন করা উচিত।

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

Comments

এটি ধরে নিয়েছে যে আপনি লেবেলের সঠিক প্রস্থটি জানেন বা অতিরিক্ত স্থান সন্ধান করতে ইচ্ছুক।

— নেলসন রোদারমেল

Answer 7

আপনি এটি চেষ্টা করতে পারেন:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

Comments

সেরা পদ্ধতি আজ

— yota

Answer 8

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

আরও ভাল, বুটস্ট্র্যাপের মধ্যে যা নির্মিত তা ব্যবহার করুন:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/