সিএসএসে প্যাডিং উপস্থিত থাকাকালীন আমি কীভাবে একটি পাঠ্যআরিয়া 100% প্রস্থকে উপচে না ফেলে তৈরি করতে পারি?

Question

আমার নীচের সিএসএস এবং এইচটিএমএল স্নিপেট রেন্ডার হচ্ছে।

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

সমস্যাটি হ'ল পাঠ্যের ক্ষেত্রটি পিতামাতার চেয়ে 8px প্রশস্ত (সীমান্তের জন্য 2px + প্যাডিংয়ের জন্য 6px) হয়ে যায়। সীমানা এবং প্যাডিং ব্যবহার চালিয়ে যাওয়ার কিন্তু textareaপিতামাতার প্রস্থের মোট আকারকে সীমাবদ্ধ করার কি কোনও উপায় আছে ?

Comments

BTW সৎকাজের এই জন্য নিবন্ধ জেফ্রি ওয়ে : এখান tutsplus উপর net.tutsplus.com/tutorials/html-css-techniques/... ); কেউ হয়তো এটা সাহায্য করবে

— কারো

Answer 1

হ্যাকগুলি ভুলে কেন কেবল সিএসএস দিয়ে করবেন না?

একটি আমি প্রায়শই ব্যবহার করি:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ব্রাউজার সমর্থন এখানে দেখুন ।

Comments

আমি বিশ্বাস করি না এটি কাজ করেছে। কিন্তু এটা করেছে। সিএসএস কখনও সহজ নয়। :-)

— নেট বার্ড

এটি কিছুক্ষণের মধ্যে পেয়েছি এমন একটি দুর্দান্ত জিনিস হয়ে উঠেছে। আপনাকে ধন্যবাদ, আইই 7 তেও এই উপায় করার কোনও সুযোগ আছে?

— জেরেমি এ পশ্চিম

নোট করুন যে আপনি এখনও প্রস্থটি ব্যবহার করতে চাইবেন: সীমানা-বাক্সের সাথে একত্রে 100%।

— টাইলার

ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলি কি কেবল সীমান্ত-বাক্সের আচরণ ব্যবহার করে না?

— পিটার হেডবার্গ

কেউ দয়া করে এটি ব্যাখ্যা করতে পারেন, এই ক্লাসটি কোথায় যায়? একটা ডিভ টেক্সারে ঘিরে?

— কুলাং

Answer 2

অনেকগুলি সিএসএস ফর্ম্যাটিং সমস্যার উত্তর "মনে হয় অন্য একটি <ডিভ> যোগ করুন!"

সুতরাং, এই চেতনায় আপনি কি একটি মোড়ক ডিভি যুক্ত করার চেষ্টা করেছেন যাতে সীমানা / প্যাডিং প্রয়োগ করা হয় এবং তারপরে 100% প্রস্থের টেক্সটরিয়টি লাগাতে হবে? এর মতো কিছু (অরক্ষিত):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

Comments

আমি% প্রস্থ ব্যবহার করা থেকে দূরে সরে এসেছি। আমি বিশ্বাস করি আপনার পদ্ধতির ঠিক পাশাপাশি কাজ করবে। ধন্যবাদ!

— এরিক শুনোভার

"যোগ করতে ভুলবেন না।" পাঠ্যগ্রন্থ শ্রেণিতে

— ক্রিস পোর্টার

@ ক্রিস: ধন্যবাদ এবং স্থির আমি মৃদু অবাক হয়েছি যে কেউ এটি ধরতে প্রায় দেড় বছর সময় নিয়েছে ...

— ডেভ শেরোহমান

এক্ষেত্রে টেক্সেরিয়ার স্ক্রোলবারগুলি কীভাবে দেখবে?

— ড্যানিয়েল লেচেমিন্যান্ট

ক্রোমে, আপনি যখন টেক্সটরিয়ার উপাদানটি ফোকাস করবেন তখন এটি স্বয়ংক্রিয়ভাবে হাইটলাইট হয় এবং আপনি যদি ডিভ র‍্যাপারের জন্য প্যাডিং তৈরি করেন তবে এই প্যাডিং দৃশ্যমান হবে এবং এর কারণে দুটি সীমানা দৃশ্যমান হবে। একটি হাইটলাইটিং থেকে এবং অন্যটি টেক্সট্র্যাপার বর্ডার থেকে: 1px কঠিন # 999999;

— কেউ 10

Answer 3

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

আমার মতে সেরা পন্থা সর্বাধিক ব্রাউজার সমর্থনে পৌঁছানোর জন্য যথাসম্ভব নিম্ন স্তরের সমাধানগুলি ব্যবহার করা। এক্ষেত্রে জাভাস্ক্রিপ্টের ব্যবহার (যা আমরা যে কোনওভাবেই পছন্দ করি) এড়িয়ে একমাত্র এইচটিএমএল সূক্ষ্মভাবে কাজ করতে পারে।

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

ডাব্লু 3 সি নির্দিষ্ট করে অন্য সুবিধাগুলি যা আমরা লক্ষ্য করতে পারি তা নির্দিষ্ট করে:

• কোনও "for" অ্যাট্রিবিউটটির প্রয়োজন নেই: যখন কোনও LABEL ট্যাগ লক্ষ্য ইনপুট ধারণ করে, তখন ক্লিক করার সময় এটি স্বয়ংক্রিয়ভাবে শিশু ইনপুটকে কেন্দ্র করে;
• যদি টেক্সারিয়ার জন্য একটি বাহ্যিক লেবেল ইতিমধ্যে ডিজাইন করা হয়েছে তবে কোনও বিরোধ নেই, যেহেতু প্রদত্ত ইনপুটটিতে একটি বা একাধিক লেবেল থাকতে পারে।

আরও বিস্তারিত তথ্যের জন্য ডাব্লু 3 সি সুনির্দিষ্ট দেখুন ।

সাধারণ উদাহরণ:

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }

<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

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

Comments

ক্রস-ব্রাউজারটি এখানে লুকিয়ে আছে তা নিশ্চিত নয়, তবে আমি এই পদ্ধতিটি পছন্দ করেছি। +1

— এইচআরজে

Answer 4

আপনি যদি প্যাডিংয়ের প্রস্থ সম্পর্কে খুব বেশি উদ্বিগ্ন না হন তবে এই সমাধানটি প্যাডিংটি শতাংশের মধ্যেও রাখবে ..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

নিখুঁত নয়, তবে আপনি কিছু প্যাডিং পাবেন এবং প্রস্থটি 100% পর্যন্ত যোগ করবে এটি সর্বোত্তম

Answer 5

আমি এখানে আরও একটি সমাধান পেয়েছি যা এত সহজ: টেক্সারিয়ার ধারকটিতে প্যাডিং-ডান যুক্ত করুন। এটি টেক্সারিয়ায় মার্জিন, সীমানা এবং প্যাডিং রাখে, যা বেক সমস্যাটিকে এড়ানো যে ক্রোক এবং সাফারি টেক্সারিয়ার চারপাশে রাখে ফোকাসটি হাইলাইট সম্পর্কে তুলে ধরে।

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

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

Comments

+1 এটি CSS3 বিবৃতিগুলির চেয়ে বেশি ব্রাউজারে কাজ করবে। দুর্ভাগ্যজনক সত্যটি পৃথিবীর এখনও র‌্যাপার ডিভিড দরকার।

— বেনসওয়েেন

আমি এই উত্তরটি সত্যিই পছন্দ করি। এটি কোনও ম্যাজিক শতাংশ সংখ্যা 100% এর চেয়ে কম ছাড়াই টেক্সারিয়া স্ন্যাপটিকে ফিট করে। পাঠ্যের ক্ষেত্রটি পিতামাতার অভ্যন্তরে যেতে এবং বাধ্য রাখতে আপনি রাপারের সমস্ত পক্ষের প্যাডিং ব্যবহার করতে পারেন। ন্যূনতম উচ্চতা এবং উচ্চতা এছাড়াও র‌্যাপারটিতেও 100% হওয়া দরকার। সবকিছুকে পুরোপুরি ফিট করার জন্য টেক্সারিয়াটি একই প্যাডিংয়ের সাথে 100% এ সেট করা যায়।

— justdan23

Answer 6

এই কোডটি আইই 8 এবং ফায়ারফক্সের সাথে আমার জন্য কাজ করে

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

Comments

ক্রোমেও কাজ করেছেন।

— সঞ্জীব

Answer 7

আপনি বাক্স-আকারের বৈশিষ্ট্যটি ব্যবহার করতে পারেন, এটি সমস্ত মূল স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এবং আই 8 + দ্বারা সমর্থিত। আই আই 7 এর জন্য আপনার এখনও একদম প্রয়োজন। এখানে আরও পড়ুন ।

Comments

@ ডেভিড জোনস্টোন: এবং যেহেতু আপনি আর 7 বা তার বেশি বয়সীদের জন্য সাইটগুলি বিকাশ করছেন না, এটিই সমাধানটি :)

— জোনাতান লিটকে

Answer 8

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

আমি মনে করি না যে প্যাডেন্টের শতাংশের ক্ষেত্রেও প্যাডিং এবং বর্ডার প্রস্থগুলি প্রকাশ করা আপনার পক্ষে ঠিক।

Answer 9

আমি সিএসএস সলিউশনের পরিবর্তে একটি ইনলাইন-স্টাইলিং সমাধান খুঁজছিলাম এবং প্রতিক্রিয়াযুক্ত টেক্সারিয়ার জন্য এটিই সেরা আমি যেতে পারি:

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

Answer 10

আপনি যদি এটি প্যাড করেন এবং এটি অফসেট করেন:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

পাঠ্য এলাকা ডান দিকে পুরোপুরি ধারক ডান দিকে সঙ্গে সাজায়, এবং পুরোপুরি কন্টেইনারে শরীর পাঠ্য সহ পাঠ্য এলাকা প্রান্তিক ভিতরে টেক্সট ... আর পাঠ্য এলাকা বাম দিকে একটি বিট 'লাঠি আউট'। এটা মাঝে মাঝে সুন্দর।

Answer 11

বক্স আকারের সম্পত্তি ব্যবহার করুন :

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

এটা সাহায্য করবে

Answer 12

যারা বুটস্ট্র্যাপ ব্যবহার করেন তাদের ক্ষেত্রে টেক্সারিয়া.ফর্ম-কন্ট্রোল টেক্সারিয়া আকারের সমস্যাগুলিরও হতে পারে। ক্রোম এবং ফায়ারফক্স নিম্নলিখিত বুটস্ট্র্যাপ সিএসএসের সাথে বিভিন্ন উচ্চতা ব্যবহার করছে বলে মনে হচ্ছে:

textarea.form-conrtol{
    height:auto;
}

Answer 13

আমি প্রায়শই সেই সমস্যাটি সমাধান করি calc()। আপনি কেবল টেক্সেরিয়াকে ১০০% প্রস্থ এবং নির্দিষ্ট পরিমাণে প্যাডিং দিয়েছেন তবে আপনি টেক্সারিয়াকে যে 100% প্রস্থ দিয়েছেন তার মোট বাম এবং ডান প্যাডিং বিয়োগ করতে হবে:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

অথবা আপনি যদি পাঠ্যকে একটি সীমানা দিতে চান:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

Answer 14

নেতিবাচক মার্জিন সম্পর্কে কীভাবে?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

Answer 15

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>