আমি কীভাবে কোনও টেক্সেরিয়ের পুনরায় আকার পরিবর্তনযোগ্য সম্পত্তি অক্ষম করব?

2647

আমি এ এর ​​আকার পরিবর্তনযোগ্য সম্পত্তিটি অক্ষম করতে চাই textarea।

বর্তমানে, আমি textareaমাউসের ডানদিকে নীচে ডানদিকে ক্লিক করে একটি আকার পরিবর্তন করতে পারি textarea। আমি কীভাবে এটি অক্ষম করতে পারি?

এখানে চিত্র বিবরণ লিখুন

html  css 
— user549757
সূত্র
4
@ জেডিআইএসএক্স - আরও কিছু নির্দিষ্ট পরিস্থিতিতে পুনরায় আকার দেওয়ার ফলে বিন্যাস এবং প্রিন্টিবিলিটি (বর্তমান মিশন-সমালোচনামূলক প্রকল্পের একটি গুরুত্বপূর্ণ দিক) ভাঙ্গতে পারে।
— এলোমেলো_উজার_নাম
10
কখনও কখনও আপনি সত্যিকার অর্থে পুনরায় আকার পরিবর্তনযোগ্য টেক্সারিয়া চান। উদাহরণস্বরূপ, এই ক্ষেত্রে, আপনি যখন (শর্তাধীন) কোনও পাঠ্যকে কোনও লেবেলের মতো দেখায় এমন কিছুতে রূপান্তর করছেন। এলোমেলোভাবে ভাসমান গ্রাবারের পাশে কোনও লেবেল থাকা সত্যিই অদ্ভুত বলে মনে হচ্ছে।
— নিমিনেম
2
সব কিছুর ভালবাসার জন্য, দয়া করে এটি একটি আসল টেক্সেরিয়ায় করবেন না বা আপনি আপনার শক্তি ব্যবহারকারীদের বিচ্ছিন্ন করবেন। কোর ব্রাউজারের কার্যকারিতা ভঙ্গকে একটি পারমাণবিক বিকল্প হিসাবে বিবেচনা করা উচিত।
— সুপারলুমিনিয়ার

উত্তর:

3529

নিম্নলিখিত সিএসএস বিধি textareaউপাদানগুলির জন্য আকার পরিবর্তনকে অক্ষম করে:

textarea {
  resize: none;
}

কিছু (তবে সব নয়) textareaএর জন্য এটি অক্ষম করতে কয়েকটি বিকল্প রয়েছে ।

(যেমন, ) textareaএ nameঅ্যাট্রিবিউট সেট করে একটি নির্দিষ্ট অক্ষম করতে :foo<textarea name="foo"></textarea>

textarea[name=foo] {
  resize: none;
}

বা, কোনও idগুণাবলীর (যেমন, <textarea id="foo"></textarea>) ব্যবহার করে :

#foo {
  resize: none;
}

W3C এর পৃষ্ঠা তালিকা বিধিনিষেধ মাপ সম্ভাব্য মান: কেউ না, উভয় অনুভূমিক, উল্লম্ব, এবং তার অধিকার গ্রহণ কর

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

ব্রাউজারগুলি বর্তমানে এই বৈশিষ্ট্যটি কী সমর্থন করে তা দেখতে একটি শালীন সামঞ্জস্য পৃষ্ঠার পর্যালোচনা করুন । জোন হালকা যেমন মন্তব্য করেছেন, সীমাবদ্ধতাগুলি সর্বোচ্চ-প্রস্থ, সর্বোচ্চ-উচ্চতা, ন্যূনতম প্রস্থ এবং নূন্যতম-উচ্চতা ব্যবহার করে সিএসএসে আরও সংযত হতে পারে ।

জানা অত্যন্ত গুরুত্বপূর্ণ:

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

সারা কোপের উদ্ধৃতি, http://css-tricks.com/almanac/properties/r/resize/

— ডোনাট
সূত্র
ফায়ারফক্স, অপেরা এবং / অথবা আইই এর কোনও সমাধান আছে?
— Vidime বিদাস
6
@ আইইম আইই এবং এফএফ 3 (এবং এর আগে) সমর্থন আকার পরিবর্তন করে না, তাই তাদের জন্য কোনও সমাধানের প্রয়োজন হয় না। এফএফ 4 এর জন্য, এই সমাধানটি কাজ করা উচিত।
— ডোনাট
24
যেমন প্রতি davidwalsh.name/textarea-resize - ব্যবহারের পুনরায় আকার দেওয়ার: উল্লম্ব বা পুনরায় আকার দেওয়ার: অনুভূমিক এক মাত্রার মাপ সীমাবদ্ধ করতে হবে। অথবা সর্বোচ্চ-প্রস্থ, সর্বাধিক উচ্চতা, ন্যূনতম প্রস্থ এবং নূন্যতম-উচ্চতা ব্যবহার করুন।
— জন হুলকা
3
আমি কি কেবলমাত্র সেই সিএসএস ব্যবহার করে অ্যাট্রিবিউট না করে সেটাকে অদ্ভুত বলে মনে করি? আমি কেন তখন সিএসএস ব্যবহার করে অক্ষম বা চেক করা বা অন্যান্য সম্পত্তি সেট করতে পারি না ...
— বুকসী
6
@ বুকসির কারণ "অক্ষম" একটি রাষ্ট্র, দৃশ্যমান সম্পত্তি নয়। সুতরাং এটি যৌক্তিক যে এটি স্টাইলিং ভাষা দ্বারা সিদ্ধান্ত নেওয়া উচিত নয় ।
— Kroltan
105

আমি দুটি জিনিস পেয়েছি:

প্রথম

textarea{resize: none}

এটি একটি সিএসএস 3, যা এখনও প্রকাশিত হয়নি , ফায়ারফক্স 4 (এবং পরে), ক্রোম এবং সাফারির সাথে সামঞ্জস্যপূর্ণ ।

আর একটি ফর্ম্যাট বৈশিষ্ট্য হ'ল ডির বৈশিষ্ট্যটি overflow: autoবিবেচনা করে ডান স্ক্রোলবার থেকে মুক্তি পাওয়া ।

কোড এবং বিভিন্ন ব্রাউজার

বেসিক এইচটিএমএল

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

কিছু ব্রাউজার

  • ইন্টারনেট এক্সপ্লোরার 8

এখানে চিত্র বিবরণ লিখুন

  • ফায়ারফক্স 17.0.1

এখানে চিত্র বিবরণ লিখুন

  • ক্রৌমিয়াম

এখানে চিত্র বিবরণ লিখুন

— রামি জামলেহ
সূত্র
62

সিএসএস 3 এর ইউআই উপাদানগুলির জন্য একটি নতুন সম্পত্তি রয়েছে যা আপনাকে এটি করার অনুমতি দেবে। সম্পত্তি হ'ল পুনরায় আকারের সম্পত্তি । সুতরাং আপনি সমস্ত টেক্সারিয়ার উপাদানগুলির আকার পরিবর্তন করতে অক্ষম করতে আপনার স্টাইলশিটে নিম্নলিখিতগুলি যুক্ত করবেন:

textarea { resize: none; }

এটি একটি সিএসএস 3 সম্পত্তি; ব্রাউজারের সামঞ্জস্যতা দেখতে একটি সামঞ্জস্য চার্ট ব্যবহার করুন ।

ব্যক্তিগতভাবে, আমি টেক্সারিয়া উপাদানগুলিতে পুনরায় আকার দেওয়া অক্ষম করতে খুব বিরক্তিকর মনে করব। এটি সেই পরিস্থিতিতে একটি যেখানে ব্যবহারকারীর ক্লায়েন্টকে "ব্রেক" করার চেষ্টা করা হচ্ছে is যদি আপনার ডিজাইনটি কোনও বৃহত্তর টেক্সেরিয়াকে সামঞ্জস্য করতে না পারে তবে আপনি কীভাবে আপনার নকশাটি কাজ করে তা পুনর্বিবেচনা করতে চাইতে পারেন। textarea { resize: both !important; }আপনার পছন্দকে ওভাররাইড করতে যে কোনও ব্যবহারকারী তাদের ব্যবহারকারী স্টাইলশিটে যুক্ত করতে পারেন ।

— জেমস সামনার্স
সূত্র
তবে সেই ব্যবহারকারীটি ইচ্ছাকৃতভাবে তাদের বিন্যাসটি ভেঙে দেবে , তার পরিবর্তে এমন একজন ব্যবহারকারী যাকে কেবল তার / তার আকার পরিবর্তন texareaকরতে হবে এবং কিছু কাজ না করে শেষ করা উচিত
— রেডওয়ালফ প্রোগ্রামস
21

আপনার যদি গভীর সহায়তার প্রয়োজন হয় তবে আপনি একটি পুরাতন স্কুল কৌশল ব্যবহার করতে পারেন:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}
— ইয়েভগেনি
সূত্র
7
resize:noneহ্যান্ডেলটি নীচের কোণায় প্রদর্শিত হবে যা হতাশাজনকভাবে কাজ করে না তা প্রতিরোধ করতে এই সমাধানটি ব্যবহার করুন ।
— ম্যাক্রোম্যান
13

এটি এইচটিএমএলে সহজেই করা যায়:

<textarea name="textinput" draggable="false"></textarea>

এটি আমার পক্ষে কাজ করে। ডিফল্ট মান হল trueজন্য draggableঅ্যাট্রিবিউট।

— থোসিথা বিক্রমাসিংহে
সূত্র
এটি একটি এইচটিএমএল 5 বৈশিষ্ট্য, সুতরাং কেবলমাত্র নতুন ব্রাউজারগুলিই সমর্থন করবে। আমি কোথাও পড়েছি আইআই 9 এর পরে এটি সমর্থন করে।
— অ্যান্টনি
4
এটি বেশিরভাগ ব্রাউজারে কাজ করছে। প্রতিটি সর্বশেষ ব্রাউজারে।
— থুইসিতা উইক্রামাসিংহে
এটি
— টেক্সেরিয়াকে
@ অ্যান্টোনডি'আন্দ্রেয়া এটি সর্বশেষ ক্রোমে কাজ করছে না: jsfiddle.net/ps2v8df9
— অ্যাডওয়াইট জুনারকর
6

পুনরায় আকারের সম্পত্তিটি অক্ষম করতে, নিম্নলিখিত সিএসএস সম্পত্তিটি ব্যবহার করুন:

resize: none;

  • আপনি হয় এ জাতীয় ইনলাইন স্টাইলের সম্পত্তি হিসাবে এটি প্রয়োগ করতে পারেন:

    <textarea style="resize: none;"></textarea>

  • অথবা <style>...</style>উপাদান ট্যাগগুলির মধ্যে এটির মতো:

    textarea {
    resize: none;
}
— Webeng
সূত্র
6

আপনি কেবল ব্যবহার করুন: resize: none;আপনার সিএসএসে।

পুনরায় আকার দেওয়ার সম্পত্তি কিনা তা নির্দিষ্ট বা না একটি উপাদান ব্যবহারকারী দ্বারা রিসাইজেবল হয়।

দ্রষ্টব্য: পুনরায় আকারের বৈশিষ্ট্য সেই উপাদানগুলিতে প্রযোজ্য যার গণিত ওভারফ্লো মানটি "দৃশ্যমান" ব্যতীত অন্য কিছু।

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

আকার পরিবর্তন করার জন্য এখানে বিভিন্ন বৈশিষ্ট্য রয়েছে:

কোন আকার পরিবর্তন করুন:

textarea {
  resize: none;
}

উভয় উপায়ে পুনরায় আকার দিন (উল্লম্বভাবে এবং অনুভূমিকভাবে):

textarea {
  resize: both;
}

উল্লম্বভাবে পুনরায় আকার দিন:

textarea {
  resize: vertical;
}

অনুভূমিকভাবে পুনরায় আকার দিন:

textarea {
  resize: horizontal;
}

এছাড়াও আপনার যদি widthএবং heightআপনার সিএসএস বা এইচটিএমএল থাকে তবে এটি বিস্তৃত ব্রাউজার সমর্থন সহ আপনার পাঠ্যকে পুনরায় আকার দিতে বাধা দেবে।

— আলিরেজা
সূত্র
3

সিএসএস 3 এই সমস্যাটি সমাধান করতে পারে। দুর্ভাগ্যক্রমে এটি আজকাল ব্যবহৃত brow০% ব্যবহৃত ব্রাউজারগুলিতে সমর্থিত ।

ইন্টারনেট এক্সপ্লোরার এবং আইওএসের জন্য আপনি পুনরায় আকার পরিবর্তন করতে পারবেন না তবে আপনি textareaএর widthএবং এর সেট করে মাত্রাটি সীমাবদ্ধ করতে পারেন height।

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

ডেমো দেখুন

— Oriol
সূত্র
3

আপনি টেক্সটরিয়া সম্পত্তিটি সহজেই অক্ষম করতে পারেন :

textarea {
    resize: none;
}

উল্লম্ব বা অনুভূমিক আকার পরিবর্তন করতে অক্ষম করতে , ব্যবহার করুন

resize: vertical;

অথবা

resize: horizontal;
— পিটার মর্টেনসেন
সূত্র
2

বৈশিষ্ট্যগুলি কীভাবে পুনরায় আকার দেয় তা দেখানোর জন্য আমি একটি ছোট ডেমো তৈরি করেছি have আমি আশা করি এটি আপনাকে এবং অন্যদেরও সহায়তা করবে।

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
স্নিপেট প্রসারিত করুন

— আম্বুজ খান্না
সূত্র
1

এর সাথে @style, আপনি এটিকে একটি কাস্টম আকার দিতে পারেন এবং পুনরায় আকার বৈশিষ্ট্যটি অক্ষম করতে পারেন (resize: none;)।

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— কার্লোস ডি জেসুস বাইজ
সূত্র
1
হ্যালো, আপনার উত্তরের জন্য ধন্যবাদ, পরের বার কোডটি ফর্ম্যাট করুন।
— ব্যাপটিস্ট মিল-ম্যাথিয়াস
এটি এএসপিএন এমভিসি ভিত্তিক উত্তর। খুব সুন্দর.
— যোগীহোস্টিং
0

আপনি jQuery দিয়ে চেষ্টা করতে পারেন

$('textarea').css("resize", "none");
— সন্তোষ খলসে
সূত্র
3
আপনার আরও jquery ব্যবহার করা উচিত । আপনি এটি যথেষ্ট ব্যবহার করছেন না। :)
— ফিলিপ সাভিক
1
এটি একটি মেম - যেমন, "আপনার এটি পুরোপুরি বাদ দেওয়া উচিত এবং jQuery চেষ্টা করা উচিত try" ।
— পিটার মর্টেনসেন
0

সকলের জন্য আকার পরিবর্তন করতে অক্ষম করতে textarea:

textarea {
    resize: none;
}

কোনও নির্দিষ্টটির জন্য পুনরায় আকারটি অক্ষম করতে textareaএকটি বৈশিষ্ট্য name, বা একটি যুক্ত করুন idএবং এটিকে কিছুতে সেট করুন। এই ক্ষেত্রে, এটি নামকরণ করা হয়noresize

এইচটিএমএল

<textarea name='noresize' id='noresize'> </textarea>

সিএসএস

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}
— Abk
সূত্র
-2

সংযোজন !importantএটি কার্যকর করে তোলে:

width:325px !important; height:120px !important; outline:none !important;

outline কেবলমাত্র নির্দিষ্ট ব্রাউজারে নীল রূপরেখা এড়ানো।

— kaelds
সূত্র
6
!importantগুণকে অপব্যবহার করবেন না । সিএসএস অ্যাট্রিবিউটটি resize: noneপুনরায় আকার বৈশিষ্ট্যটি সরিয়ে দিতে পারলে প্রস্থ এবং উচ্চতা নির্ধারণ করা অর্থহীন
— র‌্যাপ্টর
1
!importantমন্দ কি না ?
— পিটার মর্টেনসেন
বর্তমান ক্রোমে এই অনুভূমিক আকার পরিবর্তন করা বন্ধ করুন তবে আমি এখনও উলম্বভাবে পাঠ্যকেই আকার দিতে পারি।
— অদ্বৈত জুনারকর
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.