CODEWITHSUNDEEP
csshtmlbootstrap-4
Paul Taylor
Paul Taylor

Reputation: 13190

In Html How do I vertically align label acting as button with button so line up correctly

How do I align label element vertically with button.

I am using this hack to make a file button look like the regular bootstrap buttons

Twitter Bootstrap Form File Element Upload Button

The trouble is the button is no longer vertically aligned properly with the the regular buttons. (If I replace the label element with regular button element it looks correct but then of course it does not work.

<div style="padding:0.25em">
    <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll(&#x27;ARTWORK_TABLE&#x27;);">
        Select All
    </button>
    <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll(&#x27;ARTWORK_TABLE&#x27;);">
        UnSelect All
    </button>
    <label class="btn btn-outline-secondary">
        Browse
        <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
    </label>
</div>

Upvotes: 0

Views: 45

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Using a margin utility class (mt-2) seems to work..

<div class="container">
    <div style="padding:0.25em">
        <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
            Select All
        </button>
        <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
            UnSelect All
        </button>
        <label class="btn btn-outline-secondary mt-2">
            Browse
            <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
        </label>
    </div>
</div>

https://www.codeply.com/go/kFHG1BDI1E

Upvotes: 1

Related Questions