Form File Input Button Is Large

Topic: Form File Input Button Is Large

rrrankin pro asked 7 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>

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

rrrankin

Pro User 12Support score
4Questions 2Answers 0Snippets