প্রস্থ সহ সিএসএস ইনপুট: 100% পিতামাতার সীমা ছাড়িয়ে যায়

Question

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

জেএসফিডাল স্নিপেট: http://jsfiddle.net/4x2KP/

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

    #mainContainer {
    	line-height: 20px;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: rgba(0,50,94,0.2);
    	margin: 20px auto;
    	display: table;
    	-moz-border-radius: 15px;
    	border-style: solid;
    	border-color: rgb(40, 40, 40);
    	border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
    	border-radius: 2px;
    	border-radius: 2px 5px / 5px;
    	box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
    }
    
    .loginForm {
    	width: 320px;
    	height: 250px;
    	padding: 10px 15px 25px 15px;
    	overflow: hidden;
    }
    
    .login-fields > .login-bottom input#login-button_normal {
    	float: right;
    	padding: 2px 25px;
    	cursor: pointer;
    	margin-left: 10px;
    }
    
    .login-fields > .login-bottom input#login-remember {
    	float: left;
    	margin-right: 3px;
    }
    
    .spacer {
    	padding-bottom: 10px;
    }
    
    /* ELEMENT OF INTEREST HERE! */
    input[type=text],
    input[type=password] {
        width: 100%;
    	height: 20px;
    	padding: 5px 10px;
    	background-color: rgb(215, 215, 215);
        line-height: 20px;
        font-size: 12px;
        color: rgb(136, 136, 136);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgb(114, 114, 114);
    	box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
    }
    
    input[type=text]:hover,
    input[type=password]:hover,
    label:hover ~ input[type=text],
    label:hover ~ input[type=password] {
     	background:rgb(242, 242, 242) !important;
    }
    
    input[type=submit]:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -10px 10px rgba(255,255,255,0.1);
    }

    <div id="mainContainer">
        <div id="login" class="loginForm">
            <div class="login-top">
            </div>
            <form class="login-fields" onsubmit="alert('test'); return false;">
                <div id="login-email" class="login-field">
                    <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
                    <span><input name="email" id="email" type="text"></input></span>
                </div>
                <div class="spacer"></div>
                <div id="login-password" class="login-field">
                    <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
                    <span><input name="password" id="password" type="password"></input></span>
                </div>
                <div class="login-bottom">
                    <input type="checkbox" name="remember" id="login-remember"></input>
                    <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
                    <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
                </div>
            </form>
        </div>
    </div>

Answer 1

box-sizing:border-boxকোনও উপাদানটির প্রস্থ বা উচ্চতা প্রভাবিত হতে প্যাডিং প্রতিরোধ করতে সিএসএস সংজ্ঞাটি ব্যবহার করুন । দেখুন box-sizing।

সীমানা বাক্স : প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলির মধ্যে প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে তবে মার্জিনটি নয় ... নোট করুন যে প্যাডিং এবং বর্ডারটি বাক্সের অভ্যন্তরে থাকবে।

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

দয়া করে (IE8 +) এর ব্রাউজারের সামঞ্জস্যতাbox-sizing নোট করুন ।
এই সম্পাদনার সময়, কোনও উপসর্গ প্রয়োজন হয় না; দেখতে shouldiprefix.com ।

এখানে একটি বিক্ষোভ:

#mainContainer {
  line-height: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: rgba(0, 50, 94, 0.2);
  margin: 20px auto;
  display: table;
  -moz-border-radius: 15px;
  border-style: solid;
  border-color: rgb(40, 40, 40);
  border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
  border-radius: 2px;
  border-radius: 2px 5px / 5px;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.loginForm {
  width: 320px;
  height: 250px;
  padding: 10px 15px 25px 15px;
  overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
  float: right;
  padding: 2px 25px;
  cursor: pointer;
  margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
  float: left;
  margin-right: 3px;
}
.spacer {
  padding-bottom: 10px;
}
input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
  background: rgb(242, 242, 242);
  !important;
}
input[type=submit]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
.login-top {
  height: auto;/*85px;*/
}
.login-bottom {
  padding: 35px 15px 0 0;
}

<div id="mainContainer">
  <div id="login" class="loginForm">
    <div class="login-top">
    </div>
    <form class="login-fields" onsubmit="alert('test'); return false;">
      <div id="login-email" class="login-field">
        <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
        <span><input name="email" id="email" type="text" /></span>
      </div>
      <div class="spacer"></div>
      <div id="login-password" class="login-field">
        <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
        <span><input name="password" id="password" type="password" /></span>
      </div>
      <div class="login-bottom">
        <input type="checkbox" name="remember" id="login-remember" />
        <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
        <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
      </div>
    </form>
  </div>
</div>

---

বিকল্প হিসাবে, <input>উপাদানগুলিতে প্যাডিং যুক্ত করার পরিবর্তে <span>ইনপুটগুলিকে মোড়ানো উপাদানগুলিকে স্টাইল করুন । এইভাবে, কোনও অতিরিক্ত প্যাডিং দ্বারা প্রভাবিত না হয়ে <input>উপাদানগুলিকে সেট করা যেতে পারে width:100%। নীচে উদাহরণ:

#login-form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: rgba(0, 50, 94, 0.2);
  margin: 20px auto;
  padding: 10px 15px 25px 15px;
  border: 4px solid rgb(40, 40, 40);
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  width: 320px;
}
label span {
  display: block;
  padding: .3em 1em;
  background-color: rgb(215, 215, 215);
  border-radius: .25em;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  margin: 0 0 1em;
}
label span:hover {
  background: rgb(242, 242, 242);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
  background: none;
  border: none;
  width: 100%;
  height: 2em;
  line-height: 2em;
  font-size: 12px;
  color: rgb(136, 136, 136);
  outline: none;
}
.login-bottom {
  margin: 2em 1em 0 0;
}
input#login-button {
  float: right;
  padding: 2px 25px;
}
input#login-remember {
  float: left;
  margin-right: 3px;
}

<form id="login-form">
  <label>E-mail address
    <span><input name="email" type="text" /></span>
  </label>
  <label>Password
    <span><input name="password" type="password" /></span>
  </label>
  <div class="login-bottom">
    <label>
      <input type="checkbox" name="remember" id="login-remember" />Remember my email
    </label>
    <input type="submit" name="login-button" id="login-button" value="Log in" />
  </div>
</form>

Comments

এই কাজটি মনে হচ্ছে। অনেক ধন্যবাদ, আপনি আমাকে অনেক সময় বাঁচিয়েছেন।

— পিলজ

আপনার প্রথম অংশে প্রসারিত করতে:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;

— ব্র্যাডমেজ

তুমি আমার দিনকে বন্ধু বানিয়েছ ... ছোট সিএসএস তবে খুব গুরুত্বপূর্ণ :)

— গৌরব মাখিজা

Answer 2

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

input {
    min-width: 100%;
    max-width: 100%;
}

Comments

এটিই আমার পক্ষে খুব সাধারণ সমাধানের জন্য কাজ করেছে ধন্যবাদ

— আলেকজএইচ

Answer 3

অন্যান্য উত্তরগুলি আপনাকে প্রস্থকে হার্ড-কোড করতে বা ব্রাউজার-নির্দিষ্ট হ্যাক ব্যবহার করতে বলে মনে হচ্ছে। আমি মনে করি একটি সহজ উপায় আছে।

প্রস্থ গণনা করে এবং প্যাডিং বিয়োগ করে (যা ক্ষেত্রটি ওভারল্যাপের কারণ হয়)। 20px বাম প্যাডিংয়ের জন্য 10px এবং ডান প্যাডিংয়ের জন্য 10px থেকে আসে।

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}

Comments

আমি বিশ্বাস করতে পারি না আমি এর আগে কখনও দেখিনি। আমার ব্যবহারের ক্ষেত্রে পুরোপুরি ফিট করে যখন অন্য উত্তরগুলি দেয় না। ধন্যবাদ

— ছিনিয়ে নিন

আমার জন্য কাজ করেছেন। min/max-width: 100%;না, box-sizing: border-box;না। আমি ধারণা করি আমার পুরো সাইটটি একটি পাত্রে রাখুন এবং এটিকে প্যাডিং দেওয়া কার্যকর হবে তবে আমি কেবল এই সাধারণ ফিক্সের জন্য তা করতে চাই না।

— সুম 1

Answer 4

পরিবর্তন করার চেষ্টা করুন box-sizingথেকে border-box। paddingযোগ করা হয় widthআপনার এর inputউপাদান।

এখানে ডেমো দেখুন

সিএসএস

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+ +box-sizing

Answer 5

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

Answer 6

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

এটি আপনাকে যেমন প্রয়োজন তেমন ফর্মের প্রস্থ সেট করার অনুমতি দেয় এবং ইনপুটগুলি আপনার প্রান্তগুলির জন্য প্রয়োজনীয় প্যাডিংয়ের মধ্যেই থাকবে।

এই উদাহরণে আমি ফর্ম এবং ফিল্ডসেটে একটি সীমানা এবং কিংবদন্তি এবং ফিল্ডসেটে একটি অস্বচ্ছ পটভূমি রেখেছি যাতে আপনি দেখতে পান যে তারা কীভাবে ওভারল্যাপ করে এবং একে অপরের সাথে বসে থাকে।

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>

Answer 7

প্যাডিং মূলত প্রস্থে যুক্ত করা হয়, সুতরাং যখন আপনি বলেন width:100%এবং padding: 5px 10pxআপনি আসলে 100% প্রস্থে 20px যুক্ত করছেন।

Comments

এবং আমি কীভাবে এই সমস্যার প্রতিকার করতে পারি? আমি ঘন্টার পর ঘন্টা অনেকগুলি চেষ্টা করছি: /

— পিলজ

100% প্রস্থ সরিয়ে ফেলুন, ইনপুটগুলি ইনলাইন-ব্লক উপাদান হওয়ায় এটি প্রয়োজনীয় নয়।

— অ্যান্ডি জি

Answer 8

এই লাইনে বিস্মৃত বিবরণ সহ আপনার সিএসএসেও একটি ত্রুটি রয়েছে:

background:rgb(242, 242, 242);!important;

এটির আগে আধা-কোলন সরিয়ে ফেলুন। তবে, গুরুত্বপূর্ণটি খুব কমই ব্যবহার করা উচিত এবং মূলত এড়ানো যায়।

Comments

আহ ধন্যবাদ, আমি অবশ্যই এটি মিস করেছি, তদ্ব্যতীত! গুরুত্বপূর্ণ ট্যাগের প্রয়োজনও ছিল না।

— পিলজ

Answer 9

আপনি কি ইনপুট ক্ষেত্রগুলি কেন্দ্রিক হতে চান? উপাদানকে কেন্দ্র করার একটি কৌশল: উপাদানটির প্রস্থ উল্লেখ করুন এবং মার্জিনটি অটোতে নির্ধারণ করুন, যেমন:

margin : 0px auto;
width:300px

আপনার আপডেট হওয়া ফিডেলের একটি লিঙ্ক:

http://jsfiddle.net/4x2KP/5/

Comments

আসলেই নয়, আমি এগুলিকে ".লগিনফর্ম" এর প্রস্থে স্বয়ংক্রিয় আকারে আনার চেষ্টা করছি। উদাহরণস্বরূপ: jsfiddle.net/4x2KP/7

— পিলজ

আপনি .LginForm এর প্রস্থ পরিবর্তন করতে পারেন এবং ইনপুটগুলি কেন্দ্রিক থাকা উচিত

— মনিকা

হ্যাঁ এটি কাজ করে তবে আমি একটি কারণ হিসাবে "ইনসেট" প্যাডিং যুক্ত করেছি: আমি চাই না যে পাঠ্যটি "শুরু থেকে সরাসরি" শুরু করা হোক। এই ছবিটি দেখুন: d.pr/i/xSH1 (পাসওয়ার্ডের সাথে ইমেলের ইনপুটটির তুলনা করুন)

— peelz