ইনপুটগুলির মধ্যে প্যাডিং প্রস্থের 100% বিরতি দেয়

Question

ঠিক আছে, সুতরাং আমরা জানি যে কোনও বস্তুর প্যাডিং সেট করার কারণে এটি স্পষ্টভাবে সেট করা থাকলেও তার প্রস্থের পরিবর্তন ঘটায়। যদিও কেউ এর পিছনে যুক্তিটি তর্ক করতে পারে তবে এটি কিছু উপাদানগুলির সাথে কিছু সমস্যা সৃষ্টি করে।

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

এটি একবার দেখুন: http://sandman.net/test/forcss.html

দ্বিতীয় ইনপুটটির প্যাডিংটি 5px এ সেট করা হয়েছে যা আমি ডিফল্ট সেটিংকে বেশি পছন্দ করি। তবে দুর্ভাগ্যক্রমে এটি ইনপুটটি 100% প্রস্থে 10px যুক্ত করে সব দিক থেকে 10px বাড়ায়।

এখানে সমস্যা হ'ল আমি ইনপুটটির ভিতরে কোনও শিশু উপাদান যুক্ত করতে পারি না তাই আমি এটি ঠিক করতে পারি না। সুতরাং প্রশ্নটি হ'ল:

প্রস্থকে 100% বজায় রেখে কী ইনপুটটির ভিতরে প্যাডিং যুক্ত করার কোনও উপায় আছে? এটি 100% হওয়া দরকার যেহেতু ফর্মগুলি বিভিন্ন প্রস্থের পিতামাতার মধ্যে রেন্ডার হবে তাই পিতামাতার প্রস্থের আগে আমি জানি না।

Comments

দেখুন stackoverflow.com/questions/628500/... কিভাবে সিএসএস 3 ব্যবহার করার জন্য box-sizingএট্রিবিউট

— ড্যানিয়েল LeCheminant

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

— জোনাথন ডুমাইন

বক্স-সাইজিং অ্যাট্রিবিউট ব্যবহার সম্পর্কে; আমার সমস্যাটি একই সমস্যা ছিল তবে উচ্চতার সাথে - উচ্চতাটি 100% নির্ধারণের অর্থ হ'ল উচ্চতা + বর্ডার + প্যাডিং = ধারক উচ্চতা। ধারকটির প্রকৃত উচ্চতা পেতে ইনপুটটি পেতে আমাকে কেবল বাক্স-আকারদান: সামগ্রী-বাক্স ব্যবহার করা দরকার।

— স্কাইচান

আমি যা বলেছি তা বাদ দিয়ে আইই তে কাজ করে না। বক্স-আকার দেওয়ার সাথে আইই 11: সামগ্রী-বাক্স উচ্চতার সাথে উচ্চতা সামঞ্জস্য করে না: 100%। এটি নির্দিষ্ট px উচ্চতার সাথে এটি সম্মান করে না। সুতরাং উচ্চতা: 31px ডাব্লু / ও বক্স-আকারের আকার 6px উচ্চতার চেয়ে কম: 31px + বাক্স-আকারদান: সামগ্রী-বাক্স। তবে ধারণাটি উচ্চতাটি ব্যবহার করুন: 100% সুতরাং আমি নির্দিষ্ট পিক্সেলের আকার নিয়ে চিন্তিত নই!

— স্কাইচান

Answer 1

সিএসএস 3 ব্যবহার করে আপনি সম্পত্তি ব্যবহার করতে পারেন বক্স নির্ধারন পরিবর্তন কিভাবে ব্রাউজারের প্রস্থ নিরূপণ ইনপুট ।

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

আপনি এটি সম্পর্কে এখানে আরও পড়তে পারেন: http://css-tricks.com/box-sizing/

Comments

@ ভেক্টর ডিয়েপা গ্যারিগা আপনাকে ধন্যবাদ, এটি একটি দুর্দান্ত সমাধান।

— sinanakyazici

সমর্থনটি নিম্নরূপ: ক্রোম (যে কোনও): বক্স-সাইজিং অপেরা 8.5+: বক্স-সাইজিং ফায়ারফক্স (যে কোনও): -মোজ-বাক্স-সাইজিং সাফারি 3: -উইবকিট-বাক্স-সাইজিং (5.1+ সংস্করণে অব্যক্ত নয়) আই 8 +: বক্স -sizing। এছাড়াও আমি স্বীকৃত উত্তরের জন্য এটির প্রস্তাব দিচ্ছি, এটি আরও মার্জিত সমাধান।

— বেকনবিস্টনজ

আইই-তে বক্স-সাইজিং সমর্থনটি স্পষ্ট করার জন্য, আইই বক্স-সাইজিং সম্পত্তি আই ডকুমেন্ট মোডের উপর নির্ভর করে, এটি "আইই 8 স্ট্যান্ডার্ডস মোড" এবং এর থেকেও বেশি ক্ষেত্রে কাজ করে। সুতরাং ডকুমেন্ট মোডটি "আইই 8 স্ট্যান্ডার্ডস মোড" থাকলে এটি আইই 8 ব্রাউজার সংস্করণেও কাজ করবে। আশা করি এটি সহায়তা করে

— সঞ্জিব

সত্যি বলতে, box-sizing: border-box;আমি প্রথম জিনিসটি ভেবেছিলাম তবে এটি আমার পক্ষে কাজ করছে না not সম্ভবত বড়-পিতামহ-পিতা- display: flex;মাতার সাথে এ নিয়ে অশান্তি রয়েছে?

— কোডি

দেখে মনে হচ্ছে এটি প্রিফিক্স ছাড়াই সমস্ত বড় ব্রাউজারে সমর্থিত, এবং এটি বেশ কয়েকটি ভার্সনদের জন্য ছিল: ক্যানিউজ.

— জেসন

Answer 2

ক্রস ব্রাউজারটি এটি কতটা সামঞ্জস্যপূর্ণ তা আমি জানি না (এটি ফায়ারফক্স এবং সাফারিতে কাজ করে) তবে আপনি এই সমাধানটি চেষ্টা করতে পারেন:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(কেবলমাত্র আমি পরিবর্তিত মানগুলি পোস্ট করেছি)

Comments

এটি আইইতে সমস্যা সৃষ্টি করে।

— তারিক

ঠিক আছে, এটি আমার বেশি অবাক করে না :) মার্কআপটি পরিবর্তন না করে কোনও সহজ ক্রস ব্রাউজার সমাধান আছে বলে মনে করবেন না।

— মাইকেলেল

ঠিক আছে, মার্জিন যুক্ত করার পরে আমি এখনই এই সমাধানটি দিয়েছি: -5px সম্ভবত লঙ্ঘন নয়। আমি পৃষ্ঠাটিতে একটি চতুর্থ ইনপুট যুক্ত করেছি যা এটি ব্যবহার করে এবং এটি বাস্তবে কাজ করে বলে মনে হয়। jigsaw.w3.org/css-uthorator/…

— স্যান্ডম্যান

Answer 3

একটি বিকল্প প্যাডিং আছে যা INPUTএকটি মোড়ানো হয় DIV।

সিএসএস:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

এইচটিএমএল:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Comments

একটি ধারক ডিভিডে প্যাডিং কোনও ইনপুট ক্ষেত্রে প্যাডিং যুক্ত করার সাথে অ-অভিন্ন ফলাফল তৈরি করে।

— ফেলিক্স ফাং

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

— eselk

Answer 4

চূড়ান্ত-ভুলে যাওয়া calcএখানে উদ্ধার করতে আসতে পারে:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

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

Answer 5

এর সাথে সেরকম কিছু নিয়ে আমার কিছু সমস্যা হচ্ছে having আমার 100% ইনপুট এবং একটি ছোট প্যাডিং সহ টিডি রয়েছে। আমি যা করেছি তা টিডি তে প্যাডিংয়ের ক্ষতিপূরণ হিসাবে দেওয়া হয়েছিল:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

ইনপুট / টেক্সারিয়ার সীমানা এবং প্যাডিং অন্তর্ভুক্ত করতে 8px এর প্যাডিং। আশাকরি এটা সাহায্য করবে!

Comments

এই কৌশলটি কোষগুলির প্যাডযুক্ত ইনপুট ধারণ করে এমন কক্ষগুলির প্রস্থের লাইনে দাঁড় করানোর জন্য দুর্দান্ত কাজ করে .. কেবলমাত্র 100% প্রস্থের ইনপুট যুক্ত যে কোনও টিডিতে প্যাডিং-ডানটি বেছে বেছে প্রয়োগ করুন।

— সেব ব্যারে

Answer 6

সম্ভবত সীমানা + ব্যাকগ্রাউন্ডটি বন্ধ করে নিন input, এবং এর পরিবর্তে এটি একটি divসীমানা + পটভূমি এবং প্রস্থের সাথে সংযুক্ত করুন: 100%, এবং একটি মার্জিন সেট করবেন input?

Comments

এই ধরণের হ্যাকটি বর্তমানে আমি এই সমস্যার জন্য ব্যবহার করছি তবে আমি "স্টাইলের কারণে" বা হোয়টনোটের জন্য ইনপুটে সীমান্তটি ব্যবহার করব না। তবে হ্যাঁ, আমি বর্তমানে এটি কীভাবে এটি করছি এটি একটি কার্যকর সমাধান

— স্যান্ডম্যান

Answer 7

আমি যে সমাধানগুলির কাজ পেয়েছি তা হ'ল তুলনামূলকভাবে অবস্থানযুক্ত পিতামাতার ট্যাগের সাথে ইনপুটটিকে সম্পূর্ণ অবস্থান দেওয়া।

<p class="full-width-input">
    <input type="text" class="text />
</p>

শৈলী প্রয়োগ:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

সচেতন হওয়ার একমাত্র বিষয় হ'ল অনুচ্ছেদে ট্যাগটির উচ্চতা নির্ধারণ করা দরকার কারণ একেবারে অবস্থানযুক্ত শিশুরা এর উচ্চতা বৃদ্ধি করবে না। এটি width: 100%প্যারেন্ট উপাদানটির বাম এবং ডানদিকে লক করে সেট করার প্রয়োজনকে এড়িয়ে চলে ।

Answer 8

আপনার প্যাডিংয়ের জন্য শতাংশ ব্যবহার করে দেখুন:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

আপনি যদি পুরানো ব্রাউজারগুলির ব্যবহারকারীদের সম্পর্কে উদ্বিগ্ন হন যারা বাক্স-ছায়া দেখতে পান না, কেবল ইনপুটটিকে ব্যাকআপ হিসাবে একটি সূক্ষ্ম পটভূমির রঙ দিন। আপনি যদি এই ধরণের জিনিসটির জন্য পিক্সেল ব্যবহার করেন, তবে সম্ভাবনাগুলি আপনি সেগুলি অন্য কোথাও ব্যবহার করছেন, যা কয়েকটি অতিরিক্ত-চ্যালেঞ্জ উপস্থাপন করতে পারে, যদি আপনি তাদের মুখোমুখি হন তবে আমাকে জানান।

Answer 9

আমি কেবল এটির প্রতিরোধ করতে জানি এটি 100% -10 এর মতো মান নির্ধারণ করে assign তবে এর কিছু সামঞ্জস্যতার সমস্যা রয়েছে।