Topic: Form File Input Button Is Large

rrrankin pro asked 5 years ago


I am using a file input field on a form and the Choose File button is very large, even when I apply the btn-sm class. Here is a snippet.
<div class="row">
    <div class="col-md-8 mb-2">
        <div class="md-form">
            <label for="event_title">Event Title</label>
            <input name="event_title" type="text" id="event_title">
        </div>
    </div>
    <div class="col-md-4 mb-2">
        <div class="file-field">
            <div class="btn bg-danger waves-effect">
                <span>Select Banner</span>
                <input type="file">
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload Banner File">
            </div>
        </div>
    </div>
</div>
The submit and cancel buttons at the bottom of the form are fine.
<div class="row">
    <div class="col-md-12">
        <div class="md-form">
            <a href="/admin/events" class="btn bg-danger waves-effect">Cancel</a>
            <button type="submit" class="btn bg-primary waves-effect pull-right">Submit</button>
        </div>
    </div>
</div>

Marta Wierzbicka staff answered 5 years ago


Hello, First, change this: <div class="btn bg-danger waves-effect"> to this: <div class="btn btn-danger waves-effect">. Then you have two solutions: 1. Add class .btn-sm to <div class="btn btn-danger waves-effect"> and then your button will be smaller or 2. Add your custom CSS code in your CSS file, like here:
.file-field .btn {
        line-height: 1rem;
    }
Then your button also will be smaller, similar to submit and cancel buttons on the bottom. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags