CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap
gchq
gchq

Reputation: 1775

File upload formatting in Bootstrap MVC

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

Upvotes: 0

Views: 4532

Answers (2)

Paul Abbott
Paul Abbott

Reputation: 7211

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>

Upvotes: 1

kspearrin
kspearrin

Reputation: 10758

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

Upvotes: 0

Related Questions