كيف يمكنني إنشاء عرض TextArea بنسبة 100% دون أن يفيض عند وجود الحشو في CSS؟

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

سؤال

لدي مقتطف CSS وHTML التالي الذي يتم عرضه.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

هل تكمن المشكلة في أن منطقة النص تصبح أوسع بمقدار 8 بكسل (2 بكسل للحد + 6 بكسل للحشو) من الأصل.هل هناك طريقة لمواصلة استخدام الحدود والحشوة مع تقييد الحجم الإجمالي للملف textarea لعرض الوالدين؟

هل كانت مفيدة؟

المحلول

لماذا لا؟ ننسى الخارقة ومجرد القيام بذلك مع CSS؟

واحد أنا تستخدمها بشكل متكرر: 

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

وانظر دعم المتصفح هنا .

نصائح أخرى

والإجابة على العديد من المشاكل CSS التنسيق ويبدو أن "إضافة أخرى

!"

وهكذا، انطلاقا من هذه الروح، هل حاولت إضافة شعبة المجمع الذي يتم تطبيق الحدود / الحشو ثم وضع عرض 100٪ جزء النص داخل ذلك؟ شيء من هذا القبيل (غير مجربة): 

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

دعونا ننظر في الإخراج النهائي المقدم للمستخدم لما نريد تحقيقه:منطقة نص مبطنة تحتوي على حد وحشوة، ومن خصائصها أنه عند النقر عليها فإنها تنقل التركيز إلى منطقة النص الخاصة بنا، وميزة العرض التلقائي بنسبة 100% النموذجي لعناصر الكتلة.

أفضل طريقة في رأيي هي استخدام حلول منخفضة المستوى قدر الإمكان للوصول إلى الحد الأقصى من دعم المتصفحات.في هذه الحالة، يمكن أن يعمل HTML الوحيد بشكل جيد، مع تجنب استخدام Javascript (الذي نحبه جميعًا على أية حال).

تأتي علامة LABEL في مساعدتنا لأنها تحتوي على مثل هذا السلوك ويُسمح لها باحتواء عناصر الإدخال التي يجب أن تتناولها.نمطها الافتراضي هو أحد العناصر المضمنة، لذلك، من خلال إعطاء التسمية نمط عرض كتلة، يمكننا الاستفادة من العرض التلقائي بنسبة 100% بما في ذلك الحشو والحدود، في حين أن منطقة النص الداخلية ليس لها حدود، ولا تحتوي على حشوة وعرض 100% .

بإلقاء نظرة على مواصفات W3C، المزايا الأخرى التي قد نلاحظها هي:

  • ليست هناك حاجة إلى سمة "من أجل":عندما تحتوي علامة LABEL على الإدخال المستهدف، فإنها تركز تلقائيًا على الإدخال الفرعي عند النقر عليه؛
  • إذا تم تصميم تسمية خارجية لمنطقة النص بالفعل، فلن يحدث أي تعارض، حيث قد يحتوي الإدخال المحدد على تسمية واحدة أو أكثر.

يرى تفاصيل W3C للحصول على معلومات أكثر تفصيلا.

مثال بسيط:


<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>



u003Cbody style=";text-align:right;direction:rtl">u003Cdiv class="container" style=";text-align:right;direction:rtl">أنا الحاوية u003Clabel class="textareaContainer">u003Ctextarea name="text">أنا النص المبطن مع حدود مصممة ...u003C/textarea>u003C/label>u003C/div>u003C/body>u003C/html>

الحشو والحدود لعناصر .textareaContainer هي التي نريد أن نعطيها لمنطقة النص.حاول تحريرها لتصميمها كما تريد.لقد أعطيت حشوة وحدودًا كبيرة ومرئية لعنصر .textareaContainer لتمكنك من رؤية سلوكه عند النقر عليه.

إذا كنت لا أزعجت جدا حول عرض الحشو، وهذا الحل يبقي الواقع الحشو في النسب المئوية جدا .. 

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

وليست مثالية، ولكن عليك الحصول على بعض الحشو وعرض يصل الى 100٪ وذلك عن كل خير

وجئت عبر حل آخر هنا التي هي في غاية البساطة: إضافة الحشو اليمين إلى الحاويات في جزء النص ل. هذا يحافظ على الهامش، والحدود، والحشو على جزء النص، الذي يتجنب المشكلة التي أشار بيك خارج عن تسليط الضوء على التركيز التي كروم وسفاري وضعت حول جزء النص.

وينبغي أن يكون الحشو-حق الحاوية مجموع هامش فعال، والحدود، والحشو على كلا الجانبين من ناحية النص، بالإضافة إلى أي الحشو قد تحتاج إلا للحاوية. هكذا، على سبيل الحال في السؤال الأصلي: 

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}


<div class="textareacontainer">
    <textarea></textarea>
</div>

وهذا الرمز يعمل بالنسبة لي مع IE8 وفايرفوكس 

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

ويمكنك الاستفادة من خاصية التحجيم مربع، المدعومة من قبل جميع المتصفحات المتوافقة مع المعايير الرئيسية وIE8 +. كنت لا تزال بحاجة حلا لIE7 بالرغم من ذلك. إقرأ المزيد هنا .

لا، لا يمكنك أن تفعل ذلك مع CSS. وهذا هو السبب عرضت شركة مايكروسوفت في البداية أخرى، وربما أكثر عملية نموذج الصندوق . نموذج المربع الذي فاز في نهاية المطاف، يجعل من inpractical خلط النسب المئوية والوحدات.

وأنا لا أعتقد أنه على ما يرام معك للتعبير عن الحشو والحدود الاعراض في نسبة الوالد أيضا.

وكنت أبحث عن حل مضمنة التصميم بدلا من حل CSS، وهذا هو أفضل ما يمكن أن يذهب لناحية النص استجابة: 

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

إذا وسادة وتعويض مثل هذا: 

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

وعلى الجانب الأيمن من ناحية النص محاذاة تماما مع الجانب الأيمن من الحاوية، <م> و النص داخل جزء النص محاذاة تماما مع النص الأساسي في الحاوية ... والجانب الأيسر من جزء النص "العصي" قليلا. انها أجمل في بعض الأحيان.

استخدم مربع تحجيم الملكية : 

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

وسيساعد ذلك

وبالنسبة للأشخاص الذين يستخدمون التمهيد، يمكن السيطرة textarea.form يؤدي إلى قضايا ناحية النص التحجيم كذلك. كروم وفايرفوكس يبدو أن استخدام ارتفاعات مختلفة مع CSS التمهيد التالي: 

textarea.form-conrtol{
    height:auto;
}

وماذا عن الهوامش السلبية؟ 

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

وأنا غالبا ما حل هذه المشكلة مع calc(). كنت مجرد إعطاء جزء النص بعرض 100٪ وكمية معينة من الحشو، ولكن عليك أن طرح الحشو إجمالي الأيسر والأيمن من عرض 100٪ قدمتموه إلى ناحية النص: 

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

وأو إذا كنت تريد أن تعطي جزء النص الحدود: 

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}


* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top