CSS'de dolgu bulunduğunda bir TextArea'nın% 100 genişliğini taşmadan nasıl yapabilirim?

426

Aşağıdaki CSS ve HTML snippet'i işleniyor.

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>

Snippet'i genişlet

Sorun, metin alanının üst öğeye göre 8 piksel daha geniş (kenarlık için 2 piksel + dolgu için 6 piksel) olması. Kenarlık ve dolgu kullanmaya devam etmenin, ancak toplam boyutunu textareaebeveynin genişliğine sınırlamanın bir yolu var mı ?

html css stylesheet

— Eric Schoonover
kaynak

Btw burada tutsplus üzerinde Jeffrey Way tarafından iyi bir makale var: net.tutsplus.com/tutorials/html-css-techniques/… Belki birine yardımcı olacaktır;)

— Birisi

664

Neden kesmek unutmak ve sadece CSS ile yapmak?

Sık kullandığım biri:

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

Tarayıcı desteğine buradan bakın .

— Piet Bijl
kaynak

22

Bunun işe yaradığına inanamıyorum. Ama oldu. CSS hiç bu kadar kolay olmamıştı. :-)

— Nate Bird

1

Bu bir süredir bulduğum en havalı şeylerden biri olmalı. Teşekkürler, IE7 de bunu yapmanın bir yolu var mı?

— Jeremy

47

Yine de sınır kutusuyla birlikte genişlik:% 100 kullanmak isteyeceğinizi unutmayın.

— Tyler

3

Internet Explorer'ın eski sürümlerinde yalnızca kenarlık kutusu davranışı kullanılmıyor mu?

— Peter Hedberg

3

birisi bunu açıklayabilir mi, bu sınıf nereye gidiyor? textarea'yı çevreleyen bir div?

— koolaang

81

Birçok CSS biçimlendirme sorununun cevabı "başka <div> ekleyin!"

Yani, bu ruhla, sınır / dolgu uygulanmış bir sarıcı div eklemeyi ve sonra% 100 genişlikli metin alanını bunun içine koymayı denediniz mi? Gibi bir şey (denenmemiş):

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>

Snippet'i genişlet

— Dave Sherohman
kaynak

1

Sonunda% genişliklerini kullanmaktan uzaklaştım. Yine de yaklaşımınızın da işe yarayacağına inanıyorum. Teşekkürler!

— Eric Schoonover

5

"." Eklemeyi unutmayın. textwrapper sınıfına.

— Chris Porter

3

@Chris: Teşekkürler ve düzeltildi. Birinin bunu yakalaması neredeyse bir buçuk yıl sürdüğüne hafifçe şaşırdım ...

— Dave Sherohman

2

Bu durumda textarea'nın kaydırma çubukları nasıl görünecek?

— Daniel LeCheminant

1

Chrome'da, textarea öğesine odaklandığınızda otomatik olarak vurgulanır ve div sarmalayıcısı için dolgu oluşturursanız, bu dolgu görünür olur ve bu nedenle iki kenarlık görünür olur. Biri hightlighting'den ve diğeri .textwrapper sınırından: 1px solid # 999999;

— Birisi

22

kullanıcıya elde etmek istediğimiz şeyin elde ettiği son çıktıyı düşünelim : hem kenarlık hem de dolgu ile yastıklı bir textarea, hangi özellikler tıklandığında odağı textarea'mıza geçiriyorlar ve otomatik% 100 genişliğin avantajı blok elemanlarının tipik.

Bence en iyi yaklaşım, tarayıcı desteği maksimum seviyesine ulaşmak için olabildiğince düşük düzeyde çözümler kullanmaktır. Bu durumda tek HTML, Javascript (her nasılsa hepimiz seviyoruz) kullanmaktan kaçınarak iyi çalışabilir.

LABEL etiketi yardımımıza giriyor çünkü böyle bir davranışa sahip ve ele alması gereken girdi öğelerini içermesine izin verildi. Varsayılan stili satır içi öğelerin biridir, bu nedenle etikete bir blok görüntüleme stili vererek dolgu ve kenarlıklar da dahil olmak üzere otomatik% 100 genişlikten yararlanabiliriz, iç metin alanının kenarlığı, dolgu yok ve% 100 genişliği vardır. .

W3C spesifikasyonlarına göz attığımız diğer avantajlar şunlardır:

"for" özelliği gerekli değildir: Bir LABEL etiketi hedef girişi içerdiğinde, tıklandığında otomatik olarak alt girdiye odaklanır;
metin alanı için harici bir etiket önceden tasarlanmışsa, belirli bir girdinin bir veya daha fazla etiketi olabileceğinden çakışma olmaz.

Daha ayrıntılı bilgi için W3C teknik özelliklerine bakın .

Basit örnek:

.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; 
  }

<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

Snippet'i genişlet

.TextareaContainer öğelerinin dolgusu ve kenarlığı, texatarea'ya vermek istediğimiz öğelerdir. İstediğiniz gibi biçimlendirmek için bunları düzenlemeyi deneyin. Tıklandığında davranışlarını görmenizi sağlamak için .textareaContainer öğesine büyük ve görünür dolgu ve kenarlıklar verdim.

— Emanuele Del Grande
kaynak

Burada hangi tarayıcıların yakalandığından emin değilim, ama yaklaşımı sevdim. +1

— HRJ

15

Dolgunun genişliği konusunda fazla uğraşmazsanız, bu çözüm aslında dolguyu yüzde olarak tutar.

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

Mükemmel değil, ancak biraz dolgu alırsınız ve genişlik% 100'e kadar ekler, böylece hepsi iyi

— qui
kaynak

12

Burada çok basit başka bir çözümle karşılaştım : textarea'nın konteynerine dolgu ekle. Bu, Beck'in krom ve safarinin textarea'nın etrafına koyduğu vurguyu vurguladığı problemi önleyen textarea'daki kenar boşluğunu, kenarlığı ve dolguyu tutar.

Kabın dolgu hakkı, metin alanının her iki tarafındaki etkin kenar boşluğunun, kenarlığın ve dolgu malzemesinin toplamı ve ayrıca kap için başka türlü isteyebileceğiniz dolguların toplamı olmalıdır. Yani, orijinal sorudaki durum için:

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>

— Brian
kaynak

1

+1 Bu, CSS3 ifadelerinden daha fazla tarayıcıda çalışır. Talihsiz gerçek şu ki, dünyanın hala sarıcı divlere ihtiyacı var.

— BenSwayne

Bu cevabı gerçekten çok beğendim. % 100'den daha az sihirli yüzde sayısı olmadan textarea yapışmasını sağlar. Metin alanını üst öğeye taşınmaya ve içinde kalmaya zorlamak için sarmalayıcıdaki tüm kenarlarda dolgu kullanabilirsiniz. Min. Yükseklik ve yükseklik de ambalaj üzerinde% 100 olmalıdır. Ardından textarea, her şeyin mükemmel şekilde uyması için aynı dolgu ile% 100'e ayarlanabilir.

— justdan23

9

Bu kod IE8 ve Firefox ile benim için çalışıyor

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

— Jeff Konuk
kaynak

Chrome'da da çalıştı.

— Sanjeev

5

Kutu boyutlandırma özelliğinden yararlanabilirsiniz, standart ana uyumlu tüm tarayıcılar ve IE8 + tarafından desteklenir. Yine de IE7 için bir geçici çözüme ihtiyacınız olacak. Daha fazlasını buradan okuyun .

— jzfgo
kaynak

@DavidJohnstone: Ve artık IE7 veya daha eski sürümler için site geliştirmediğiniz için, bu çözüm :)

— Jonatan Littke

2

Hayır, bunu CSS ile yapamazsınız. Microsoft'un başlangıçta başka ve belki de daha pratik bir kutu modeli tanıtmasının nedeni budur . Sonunda kazanan kutu modeli, yüzdeleri ve birimleri karıştırmayı pratik hale getirir.

Dolgu ve kenarlık genişliklerini üst öğe yüzdesi olarak da ifade etmenin sizin için uygun olduğunu düşünmüyorum.

— Buti-oksa
kaynak

2

CSS çözümü yerine satır içi şekillendirme çözümü arıyordum ve bu, duyarlı bir textarea için gidebileceğim en iyisi:

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

— Jee Mok
kaynak

1

Pedi ve bu şekilde kaydırırsanız:

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

textarea sağ tarafı tamamen kabın sağ tarafı ile hizalar, ve mükemmel bir kapta gövde metni ile textarea Uyum Gösterir içindeki metin ... ve textarea sol tarafı biraz 'sopalarla'. bazen daha güzel.

— commonpike
kaynak

1

Kutu boyutlandırma özelliğini kullan :

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

Bu yardımcı olacak

— user3074446
kaynak

1

Bootstrap kullanan kişiler için textarea.form-control, textarea boyutlandırma sorunlarına da yol açabilir. Chrome ve Firefox, aşağıdaki Bootstrap CSS ile farklı yüksekliklerde görünüyor:

textarea.form-conrtol{
    height:auto;
}

— Gwi7d31
kaynak

1

Bu sorunu sık sık düzeltirim calc(). Sadece metin alanına% 100 genişlik ve belirli miktarda dolgu verirsiniz, ancak metin alanına verdiğiniz% 100 genişliğin toplam sol ve sağ dolgusunu çıkarmanız gerekir:

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

Veya metin alanına bir sınır vermek istiyorsanız:

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

— Jeroen Bellemans
kaynak

0

Negatif marjlara ne dersiniz?

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

— meustrus
kaynak

0

* {
    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>

Snippet'i genişlet

— antelove
kaynak