সাফারিতে টেক্সারিয়া রাইজ হ্যান্ডেল লুকিয়ে রাখা


97

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

তবে সাফারিতে নীচের ডানদিকে একটি "হ্যান্ডেল" সরঞ্জাম রয়েছে যা ব্যবহারকারীকে ক্লিক করে এবং টেনে টেক্সেরিয়াকে পুনরায় আকার দিতে দেয়। আমি স্ট্যাকওভারফ্লোতে একটি প্রশ্ন জিজ্ঞাসার পৃষ্ঠাতে টেক্সারিয়ার সাথে এই সমস্যাটিও লক্ষ্য করেছি। এই সরঞ্জামটি বিভ্রান্তিকর এবং মূলতঃ পথে আসে।

সুতরাং, এই আকার পরিবর্তন হ্যান্ডেলটি লুকানোর কি কোনও উপায় আছে?

("হ্যান্ডেল" সঠিক শব্দ কিনা তা আমি নিশ্চিত নই, তবে আমি আরও ভাল শব্দটি ভাবতে পারি না))

উত্তর:


178

আপনি সিএসএসের সাহায্যে আকার পরিবর্তনকে ওভাররাইড করতে পারেন:

textarea
{
   resize: none;
}

বা কেবল সহজভাবে

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

বৈধ বৈশিষ্ট্যগুলি হ'ল: উভয়, অনুভূমিক, উল্লম্ব, কিছুই নয়


22
এখানে কঠোরভাবে প্রাসঙ্গিক নয়, তবে সাফারি ন্যূনতম উচ্চতা, সর্বাধিক উচ্চতা, ন্যূনতম প্রস্থ এবং সর্বাধিক প্রস্থের সিএসএস বৈশিষ্ট্যগুলিকেও পুনরায় আকার পরিবর্তন করতে সক্ষম রাখে তবে এটি কতটা আকার পরিবর্তন করতে পারে তার সীমাবদ্ধ রাখে resp
স্টিভেমসন

4
ধন্যবাদ! এই একই প্রশ্ন জিজ্ঞাসা করতে
চলেছিল

আমি পুনরায় আকার নির্ধারণের পরে যদি আমি এটি হোভারে দেখাতে চাই তবে কী না?
মাইকেল ফরেস্ট

@ মিশেল ফরেস্ট: আপনি কি টেক্সারিয়া চেষ্টা করেছেন: হোভার {রাইজাইজ: উত্তরাধিকারী! গুরুত্বপূর্ণ; ? আমি কখনই চেষ্টা করে দেখিনি, শুধু অনুমান।
তামাস সিজনেজ

7
একটি সতর্কতা: ব্যবহারকারীর <textarea>এটিকে পুনরায় আকার দেওয়ার অনুমতি না দেওয়া একটি ব্যবহারযোগ্যতার সমস্যা হতে পারে। সেটিং resize:vertical;প্রায়শই একটি ভাল বিকল্প। এটি আপনার বিন্যাসে বিশৃঙ্খলা সৃষ্টি করা উচিত নয় এবং এটি ব্যবহারকারীকে নিয়ন্ত্রণের বৃহত্তর ধারণা দেয়।
ওয়েব_ ডিজাইনার

2

সমস্ত TextAreaউপাদানগুলির জন্য এই আচরণটি অক্ষম করতে নিম্নলিখিত সিএসএস বিধিটি ব্যবহার করুন :

textarea {
    resize: none;
}

আপনি যদি কিছু (তবে সমস্ত নয়) TextAreaউপাদানগুলির জন্য এটি অক্ষম করতে চান তবে আপনার কাছে কয়েকটি বিকল্প রয়েছে ( এই পৃষ্ঠায় আপনাকে ধন্যবাদ )।

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

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

অথবা, একটি আইডি ব্যবহার করে (যেমন, <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

মনে রাখবেন এটি কেবল ওয়েবকিট-ভিত্তিক ব্রাউজারগুলির জন্য প্রাসঙ্গিক (যেমন, সাফারি এবং ক্রোম), যা TextAreaনিয়ন্ত্রণগুলিতে পুনরায় আকার হ্যান্ডেল যুক্ত করে।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.