আমি কীভাবে পাঠ্যকে তার পিতামাতার ডিআইভি উপাদান ছাড়িয়ে আটকাতে পারি? (শুধুমাত্র গুগল ক্রোম সমস্যা)

Question 1

আমি কীভাবে টেক্সারিয়াকে তার পিতামাতার ডিআইভি উপাদান ছাড়িয়ে আটকাতে পারি?

আমার এই টেক্সেরিয়াটি একটি ডিআইভির অভ্যন্তরে থাকা টেবিলের ভিতরে রয়েছে এবং মনে হয় এটি পুরো টেবিলটিকে তার সীমানা থেকে প্রসারিত করে।

আপনি আরও সাধারণ ক্ষেত্রে এমনকি একই অবস্থার উদাহরণ দেখতে পাচ্ছেন, কেবল একটি ডিভের ভিতরে একটি পাঠ্য অঞ্চল রেখেছেন (যেমনটি এখানে www.stackoverflow.com তে ব্যবহৃত হয়)

আপনি নীচের চিত্রগুলি থেকে দেখতে পারেন যে টেক্সারিয়া এর পিতামাতার আকারের চেয়েও প্রসারিত করতে পারে? আমি কীভাবে এটি প্রতিরোধ করব?

আমি সিএসএসে একধরনের নতুন তাই আমার কী সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করা উচিত তা সত্যই আমি জানি না। আমি বেশ কয়েকটি প্রদর্শন , ওভারফ্লোর মতো চেষ্টা করেছি । তবে তারা কৌশলটি বলে মনে হচ্ছে না। আমি আর কিছু মিস করেছি?

দ্বি বিভাগ

পাঠ্য অঞ্চল

আপডেট: এইচটিএমএল

সিএসএস

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
}

আপনি যদি এই কোডটি http://jsfiddle.net এর ভিতরে রাখেন তবে দেখবেন যে তারা ভিন্নভাবে কাজ করে। যদিও টেক্সারিয়া তার সিএসএস শৈলীতে ঘোষিত শতাংশের মধ্যে সীমাবদ্ধ, তবুও এটির পিতামাতা সারণীটি যতটা বড় হতে চায় তার কারণ হতে পারে এবং তারপরে আপনি দেখতে পাচ্ছেন যে এটি তার পৈতৃক সীমানায় ছড়িয়ে পড়ে। এটি ঠিক করার জন্য কোন চিন্তা? اور

Question 2

আকার পরিবর্তন সম্পূর্ণরূপে অক্ষম করতে:

textarea {
    resize: none;
}

কেবল উল্লম্ব আকার পরিবর্তন করতে অনুমতি দিতে:

textarea {
    resize: vertical;
}

শুধুমাত্র অনুভূমিক আকার পরিবর্তন করতে অনুমতি দিতে:

textarea {
    resize: horizontal;
}

অথবা আপনি আকার সীমাবদ্ধ করতে পারেন:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

আকার পিতামাতার প্রস্থ এবং / অথবা উচ্চতায় সীমাবদ্ধ করতে:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

Question 3

টেক্সারিয়া রাইজাইজ কন্ট্রোল CSS3 রিসাইজ প্রপারটির মাধ্যমে উপলব্ধ :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

অনুমোদিত মুল্যগুলি স্ব-বর্ণনামূলক: none(টেক্সারিয়া আকার পরিবর্তনকরণ অক্ষম করে) both, verticalএবং horizontal।

লক্ষ্য করুন যে ক্রোম, ফায়ারফক্স এবং সাফারিতে ডিফল্ট both।

আপনি প্রস্থ এবং পাঠ্য এলাকা উপাদান উচ্চতা সীমাবদ্ধ করতে চান তাহলে, একটি সমস্যা না: এই ব্রাউজার এছাড়াও সম্মান max-height, max-width, min-height, এবং min-widthCSS এর বৈশিষ্ট্য নির্দিষ্ট অনুপাত মধ্যে মাপ প্রদান।

কোড উদাহরণ :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}

<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

স্নিপেট প্রসারিত করুন

Question 4

আমি আশা করছি আপনি যে আমি একই সমস্যা হচ্ছে ছিল ... আমার সমস্যা সহজ ছিল: ধারক ভিতরে লক শতকরা সঙ্গে একটি নির্দিষ্ট পাঠ্য এলাকা করুন (আমি সিএসএস / জেএস / HTML এ নতুন তাই আমার সাথে ভালুক, যদি আমি লিঙ্গো সঠিকভাবে পাবেন না) যাতে এটি ডিভাইসটি প্রদর্শিত হয় তা বিবেচনা না করেই, পাত্রে (টেবিল সেল) ভরাট বাক্সটি সঠিক পরিমাণে স্থান নেয়। আমি কীভাবে এটি সমাধান করেছি তা এখানে:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

তারপরে সিএসএস দেখে মনে হচ্ছে ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

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

আমি এরপরে যা করেছি (এখানে দেখানো হয়েছে) খুব স্পষ্টতই শতাংশের দিকে ঝাঁকুনি দেওয়া হচ্ছে যতক্ষণ না আমি প্রদর্শন করতে ফিট করে নিখুঁতভাবে কাজ করে এমন কি না, কোনও ডিভাইস স্ক্রিন ব্যবহৃত হয় না।

মঞ্জুর, আমি "পুনরায় আকার: কিছুই না" বলে মনে করি ওভারকিল, তবে দুঃখিতের চেয়ে নিরাপদ এবং এখন গ্রাহকরা যেভাবেই বাক্সটির আকার পরিবর্তন করতে পারবেন না, বা তারা কোন ডিভাইস থেকে এটি দেখছেন তা বিবেচনা করবে না।

এটি দুর্দান্ত কাজ করে।

Question 5

textarea {
width: 700px;  
height: 100px;
resize: none; }

টেক্সেরিয়ার জন্য আপনার প্রয়োজনীয় প্রস্থ এবং উচ্চতা নির্ধারণ করুন এবং তারপরে ব্যবহার করুন। আকার: কোনটি নয়; CSS সম্পত্তি যা টেক্সারিয়ার প্রসারিত সম্পত্তি অক্ষম করবে।