Removing whitespace in bootstrap forms

Question

I started looking into Bootstrap to make my forms responsive. I want to generate them from a data source and place each control on the page, using all the space. I got something that resemble what I want, with a responsive design, but I am using class="row", which gives me some white spaces when the divs have different heights on the same row. Is it possible to use something else that would remove those, while, if possible, staying with aligned controls that removes most of the white space?

This is the full code I am using for my tests:

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <br/>
    <div class="row">
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
    </div>
    </div>
</body>
</html>

You can see some whitespace here on the 1st row (left of Message label), as the Message Div has a different height.
You can also see this strange whitespace on the 3rd row, where a complete column is empty. It seems to happen when the label on top of it has a second line (2+3=? where the ? appear on a second line). If I drag the window large enough so the label is on one line, the problem is gone. Still, that will happen and I don't want it to create problems.
This one is not related to the whitespace (an extra problem). I need to be able to resize my text area, and the resize operation should move the other divs out of the way, instead of letting them on top of the current text area... This already works when I drag the area to the bottom (down), but not to the right.

Would you have an idea on how I could resolve the problems listed above (bullet points) ?

UPDATE

For the screen above, the way I would like it to be shown (the order of the items could differ) is indicated in the following screen. As you can see, I would like things to stay aligned in rows while reducing the white space. The smaller items are combined in the same column of the same row to fit the empty space, just like a row could have nested rows for a specific column. Still, if two smaller items cannot fit inside the space, it should not be placed there, as I want to keep lines of content. As an example, if "name" and "email" cannot fit in the height of "message", then I should have the same layout as before ("name, email, message" only, in the 1st row). The number and types of items are variables (depending on the form). Also, it is important that the form stays responsive to screen size changes and vertical resizes (it is right now), so if I lower the size or enlarge a text area, the number of columns still need to change and the same kind of layout should be seen with less columns.

I would also add that my items (whatever the type) need to be shown like this:

["centered label" "input field"]

They can then be stacked, still keeping the same absolute order (most of it at least). The important part is that I need groups for those items, that include a responsive label and input.

UPDATE2

This is another picture that represent the same problem. I used the same code as before but with some other controllers. I marked the spots where the whitespace should not be present with red arrows. This time the form items's html was generated from a data source (which represent my goal).

If you simply want each box that goes to a new “line” to start below the lower corners of all boxes in the previous row, then you can use `inline-block`, as outlined here: http://stackoverflow.com/a/37757746/1427878 — CBroe, Jun 15 '16 at 14:45

score 1 · Answer 1 · answered Jun 15 '16 at 14:47

1

For your first problem you could use <div class="clearfix"> in between each three form-groups. clearfix will clear the spacing and reset on the next row. This solution will also help your second problem. If you also want this to work on sm and xl make use of different .clearfix divs which will hide on the specific browser like so: <div class="clearfix hidden-sm"></div>.

http://www.bootply.com/KxONBlaNXJ

answered Jun 15 '16 at 14:47

Luuk Skeur

1,900
1
16
31

In your bootply example, I still have the same problems. I tried using clearfix but I still have my problems. I am testing on an up to date Chrome browser. – David Gourde Jun 15 '16 at 15:22

score 1 · Answer 2 · edited May 23 '17 at 10:33

You can see some whitespace here on the 1st row (left of Message label), as the Message Div has a different height.

The main cause of the spacing issues have to do with the differing heights of your div.form-groups.

Example: In your screenshot, the height of the "first row" is pretty much defined by the height of the message div.

Masonry.js is one way about this - refer to this previous question for a nice visual made by the original poster on what Masonry can do (as well as link to Masonry).

You can also see this strange whitespace on the 3rd row, where a complete column is empty. It seems to happen when the label on top of it has a second line (2+3=? where the ? appear on a second line). If I drag the window large enough so the label is on one line, the problem is gone. Still, that will happen and I don't want it to create problems.

That nitpicky 2+3=? is indeed "claiming" that space as you have it now, thus pushing the next div over an entire column. So another height issue and as mentioned above, Masonry is another way about this.

This one is not related to the whitespace (an extra problem). I need to be able to resize my text area, and the resize operation should move the other divs out of the way, instead of letting them on top of the current text area... This already works when I drag the area to the bottom (down), but not to the right.

I can point you to this bootply example which shows how you can disable resize.

To your points, when you drag "down", the height adjusts and the following divs react accordingly (similar theme as above). You can drag right because you've applied col-sm-6 col-lg-4 col-xl-3... i.e. the widths are controlled via Bootstrap and you can't change that by simply dragging a textarea.

Edit - I just noticed @CBroe's comment and I like that CSS only solution. The only word of caution is I probably wouldn't directly modify the bootstrap -col- classes. I would simply apply a new class name and play from there :)

Masonry would not help me a lot I think, as I still need everything "aligned". As an example, if I have the situation in my picture, I could fit the 2 text inputs in the empty space of the second row. But let's say those 2 inputs were a little bit higher, I would still need to start the next row a little bit lower, to make sure things look aligned. — David Gourde, Jun 15 '16 at 16:09
Hmm... let me take a step back... would it be possible for you to share what you want the form(s) to look like? — Christian Rios, Jun 15 '16 at 16:11
I added a picture and more information on the layout I would like to have. I am sorry my post was not clear enough. If needed, as can add other pictures and explanations. And for the resize, it worked perfectly, to lock the horizontal resize. Thank you. — David Gourde, Jun 16 '16 at 07:23

score 0 · Answer 3 · answered Jun 15 '16 at 14:46

0

You have col-*-* in both the outline <div> and the label - is the nesting intentional? If so, then the child nest needs it's own .row... see http://getbootstrap.com/css/#grid-nesting
Use col-*-* in the <input> & <textarea> to assign widths... see http://getbootstrap.com/css/#form-control-column-sizing, scroll down to Column sizing

answered Jun 15 '16 at 14:46

I have col-*-* in the input, as I want a certain width for the input too (depending on the space I have). In fact, I want to have pairs of "label-input" that appear on the same row (I never want a label to appear on the complete right and it's input at the next line). If I put the col-*-* in the label/text area, the input appear under the label instead of at it's right. – David Gourde Jun 15 '16 at 15:15

Removing whitespace in bootstrap forms

3 Answers3