Geek Answers Handbook

CSS Resize works horizontally but not vertically?

I use the bootstrap shape, trying to make it mutable both horizontally and vertically. Using simple CSS, I:

.form-group-description{
    resize: both;
    overflow: auto;
    width: 50%;

}

This will allow you to resize horizontally, but not vertically. I tried to use only resize: vertical;, but that didn't work either.

Any ideas? You can see what I'm talking about at http://impissed.co/ I will leave the site until I get some help (this is the description box)

EDIT: I changed it to use textarea instead of input in html. But now, when you resize to the right and move to the left, the shape will remain shifted to the right. Here's the html:

<div class="form-group-description form-group-lg">
    <textarea rows="4" cols="50" type="text" class="form-control" placeholder="Description"> </textarea>
</div>
+4
1

,

, , chrome - FF IE css: ).

, resizer . , :

textarea display:block, center.

<center>
  <textarea style="display:block"></textarea>
</center>
Hide result

demo of problem

1: Bootstrap display .form-control block. inline-block, initial.

textarea.form-control {
  resize: both;
  display: inline-block;
  width: 50%;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<center>
  <textarea rows="4" cols="50" type="text" 
            class="form-control" placeholder="Description">
  </textarea>
</center>
Hide result

2 (): , css text-align:center. , , div.

textarea.form-control {
  resize: both;
  display: inline-block;
  width: 50%;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="text-center">
  <textarea rows="4" cols="50" type="text" 
            class="form-control" placeholder="Description">
  </textarea>
</div>
Hide result
+4

More articles:


All Articles