CODEWITHSUNDEEP
htmlcss
Salini
Salini

Reputation: 347

How to manage two different size of textarea box in css

In css I need two different size textarea boxes. enter image description here

My Jsfiddle code link is:---jsfiddle link

But Now I am getting same textarea..What am I doing wrong???

Upvotes: 0

Views: 2345

Answers (5)

user4961104
user4961104

Reputation:

Give different height to the both textarea id's.

 textarea1 { height:10%; }
 textarea2 { height:20%; }

This may help you.

Upvotes: 0

Som
Som

Reputation: 270

Add different classes to the textarea and specify the styles in css for textarea.

Eg: HTML

<form>
<label for="emailaddress">address</label>
<textarea class="textarea1" cols="73" rows="12" name="descr"></textarea><br />

<label for="comments">About you </label>
<textarea class="textarea2" name="comments"></textarea><br />

</form>

css

.textarea1{width: 150px; height: 30px;}
.textarea2{width: 300px; height: 60px;}

Upvotes: 0

divy3993
divy3993

Reputation: 5810

Textarea has two attributes rows and cols which are similar to height and width respectively, properties of CSS.

So i would suggest you to use either of them not the both. If you are designing Respoonsive Design, must use CSS height & widthproperties.

For instance removed(comments) css for textarea.

.tablebox 
{
	
  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
 
}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea{
/*width: 50%;
height: 200px;*/
}
  <div class = "tablebox">
      
 <form>
<label for="emailaddress">address</label>
<textarea cols="73" rows="12" name="descr"></textarea><br />

<label for="comments">About you </label>
<textarea name="comments" ></textarea><br />

</form>


</div>

Upvotes: 0

Dario
Dario

Reputation: 280

you can assign two different ID and then style them:

<div class = "tablebox">   
<form>
<label for="emailaddress">address</label>
<textarea cols="73" rows="12" name="descr" id="texta1"></textarea><br />
<label for="comments">About you </label>
<textarea name="comments" id="texta2"></textarea><br />
</form>
</div>

CSS:

.tablebox 
{

  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea{
width: 50%;
height: 300px;
}

#texta1{
width: 30%;
height: 300px;
}

#texta2{
width: 70%;
height: 300px;
}

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

Please try this ons:

.tablebox 
{

  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea1 {
     height:10%;
}
 textarea2 { 
     height:20%;
 }

Demo

Upvotes: 0

Related Questions