Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap inline form button alignment

Button alignment after validation not proper.

<form class="form-inline form-padding">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" placeholder="First Name" name="firstname" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <input class="form-control" placeholder="Last Name" name="lastname" type="text" />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <button type="submit" id="form-button" class="btn btn-primary">Load</button>
            </div>
        </div>
    </form>

Validation code:

$('form').validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

The form works great, but the moment i click on Load button the alignment of button is not proper. I could not create a fiddle, i have attached the screen-shot of the same.

Before Form Submission Before Form Submition

After Form Submission enter image description here

Button alignment after validation not proper.

like image 587
Shane Avatar asked Aug 14 '26 10:08

Shane


1 Answers

Adding this CSS aligns the form correctly again:

.form-inline > .form-group {
    vertical-align: top;
}

http://jsfiddle.net/Au33X/

like image 86
Koen Avatar answered Aug 17 '26 00:08

Koen



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!