File upload formatting in Bootstrap MVC

Question

I have this in an MVC view

<form id="fileupload" action="@Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="datepicker1">Invoice Date</label>
            <div class='bfh-datepicker' id='datepickerDiv'>
                <input type='text' id="datepicker1" class="form-control" />
            </div>
         </div>

        <div class="form-group">
            <label for="InvoiceNumberTB">Invoice Number</label>
            <input type="text" class="form-control" id="InvoiceNumberTB" />
        </div>

        <div class="form-group">
            <label for="NetAmountTB">Net Amount</label>
                <input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="TaxAmountTB">Sales Tax</label>
            <input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="InvoiceTotalTB">Invoice Total</label>
            <input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="InvoiceDescriptionTB">Description</label>
            <input type="text" id="InvoiceDescriptionTB" class="form-control" />
        </div>

        <div class="form-group">
            <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
            <span class="btn btn-success fileinput-button">
                <span>Add File...</span>
                <input type="file" id="DocumentUploadTB" class="form-control" />
            </span>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span>  Save</button>
        </div>

    </div>
</div>

But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this

enter image description here

Could someone point me in the correct direction?

Thanks

Were you looking to avoid using <br />?

BSMP
– BSMP

2015-06-04 20:57:15 +00:00
Commented Jun 4, 2015 at 20:57 — BSMP
– BSMP, Commented Jun 4, 2015 at 20:57

Paul Abbott · Accepted Answer · 2015-06-04 20:56:20Z

1

Wrap the content after the label in a form-control-static div and lose the form-control class on the input:

    <div class="form-group">
        <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
        <div class="form-control-static">
            <span class="btn btn-success fileinput-button">
                <span>Add File...</span>
                <input type="file" id="DocumentUploadTB" />
            </span>
        </div>
    </div>

answered Jun 4, 2015 at 20:56

Paul Abbott

7,2213 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kspearrin · Accepted Answer · 2015-06-04 20:53:10Z

0

You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:

<div class="form-group">
    <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
    <span class="btn btn-success fileinput-button show">
        <span>Add File...</span>
        <input type="file" id="DocumentUploadTB" class="form-control" />
    </span>
</div>

Example: http://codepen.io/kspearrin/pen/PqpgYq

answered Jun 4, 2015 at 20:53

kspearrin

10.9k10 gold badges57 silver badges94 bronze badges

Collectives™ on Stack Overflow

File upload formatting in Bootstrap MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related