如何使表格正确自动缩放？

Question

Ideally I want my form's textarea and everything below it to stay centered as the width of the browser changes. I am testing on Chrome. How do I make the form always stay centered and have the textarea width decrease as the browser's width decreases?

Note - I could only post 2 links in question, so please see my comment for a third image.

Half Screen (this is when you simply drag the right end of the browser to the left. Notice that the line where you add money has aligned left instead of center)

Minimum width screen (this is the furthest you can drag the edge of the browser to the left. The problem here is that the textarea's handle (bottom right corner) is no longer visible. I want the textarea's width to adjust to the browser's smaller dimension):

HTML

<form class="form-inline" align="center">

    <!-- Section to type question-->
        <div class="form-group" style="display:block">
            <textarea class="form-control" style="width:100%" rows="5"></textarea>
        </div>

    <!--Section to add money---->
        <div class="input-group" id="AddMoney">
          <span class="input-group-addon">$</span>
          <input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)'>
        </div>

    <!--Section to add file-->
        <div id="AddFile">
            <a href="#" onclick="document.getElementById('uploadFile').click(); return false;" />Add File</a>
            <input type="file" id="uploadFile" style="visibility: hidden;" />
        </div>

        <div id="imagePreview"></div>

    <!--Section for the Submit button-->
        <div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

CSS

form {
    width:500px;
    margin:50px auto;
}
#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}
#AddMoney {
    width:150px;
    top:10px;
}
#AddFile {
    position:relative;
    top:10px;
}

Javascript

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<!-- jQuery ui -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Answer 1

Since you added jQuery as a tag, I'm going to assume you're ok with using a jquery solution. What I recommend is a simple function that centers elements on window resize. It could look something like this:

function center(){
    var width = $(window).width();
    var width2 = width - $('#elementToCenter').width();
    var newMargin = width2 / 2;
    $('#elementToCenter').css("margin-left", newMargin);
}
$(window).resize(center);

The variable width represents the total width of the window. To get the whitespace on either side of the element in question, subtract its width from that total to get width2 . Now, divide that by 2 to get the amount of whitespace that belongs on each side. Finally you can set that ( newMarin ) to the margin-left (or margin-right if you feel so inclined) and the element should display in the center of the page.

You might prefer this solution because the only framework it requires you to bring in is jQuery, and it looks like you've already done that.

Cheers!

Answer 2

Just get rid off your css. Bootstrap takes care of everything itself. In your super simple case you don't even have to use media tags.

  form {
    max-width:500px;
    margin:50px auto;
  }

You can resize screen in plnkr and see that everything is resizing.

Answer 3

I think this will work, but...

Just get inside Boostrap.css to learn all this stuff. Download a free Bootstrap template to start learning.

CSS FIX

form {
    width: 100%;
    max-width: 500px;
    margin:50px auto 50px auto;
}

#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}

#AddMoney {
    width:150px;
    margin-top:10px;
}

#AddMoney input {
width: 90%;
float:right;
}

#AddMoney span
{
width:5%;
}

#AddFile {
    display: block;
    position:relative;
    margin-top:10px;
}

form input,
form textarea
{
    width: 100%;
    max-width: 500px;
}

/* Small to Medium screens or higher */
@media (min-width: 768px) {
    form,
    form input,
    form textarea
    {
        max-width: 800px;
    }
}