CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
David Schuler
David Schuler

Reputation: 1031

CSS Resize work for horizontal but not vertical?

I'm using a bootstrap form, trying to make it resizable both horizontally and vertically. Using simple CSS, I have: 

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

}

This will let me resize horizantally but not vertically. I tried using only resize: vertical; but that didn't work either.

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

EDIT: I changed it to use textarea instead of input in the html. But, now when you resize to the right and move back to the left, the form will stay 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>

Upvotes: 7

Views: 5460

Answers (1)

KyleMit
KyleMit

Reputation: 30287

Minimal, Complete, and Verifiable example

This appears to be a browser bug on chrome - FF is fine and IE doesn't implement css:resize).

You can reproduce it simply with the following code by dragging the resizer right and left. It will resize out to the right with a fixed left position, but will try to center when shrinking down:

This happens for any resizable textarea with a display:block that is inside a center element.

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

demo of problem

Solutions

Fix 1: Bootstrap sets the display for any .form-control to block. You'll need to rest it to inline-block, the text area's initial display.

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>

Fix 2 (preferable): The <center> element is actually deprecated, so you should use the css property text-align:center instead. Note that now you'll need to declare the display as inline-block to properly center it within the parent 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>

Upvotes: 6

Related Questions