Upload file in one line

Question

I working with css, trying to do a custom upload file.. I want something like this:

but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:

what am I doing wrong? why I can´t show it in just one line?

HTML:

<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
  <span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Add new File</h4>

      </div>
      <div class="modal-body col-md-12" id="modal-body">
        <div id="upload">
          <div class="col-md-12">
            <div id="drop">
              <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
              <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
              <span class="input-group-btn">
                                                <button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
                                            </span>
            </div>
          </div>
          <div class="fileupload-buttonbar">
            <div>
              <button type="submit" class="btn btn-success start">
                <i class="glyphicon glyphicon-upload"></i><span>Start upload</span>

              </button>
              <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>

              </button>
              <button type="reset" class="btn btn-danger cancel">
                <i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>

              </button>
            </div>
          </div>

          <ol class="files upload-files-list"></ol>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Fiddle Demo

I search Bootstrap documentation but I get similar result, I try with given code but I get same result:

Your buttons all need to be surrounded by a single div with class "input-group" — Katajun, Feb 06 '18 at 15:27
Actually, you seem to be using Bootstrap 3 in your code but referencing the Bootstrap 4 docs, and I believe the syntax changed — Katajun, Feb 06 '18 at 15:29

score 0 · Answer 1 · answered Feb 06 '18 at 15:33

This seems to work :

<div id="drop" class="input-group">
    <span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
    <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
    <span class="input-group-btn input-group-append">
        <button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
    </span>
</div>

Demo

Note the classes input-group, input-group-append and input-group-prepend

Omg, yes it works! thankyou, one more question.. Why my browse button don't open file explorer? — , Feb 06 '18 at 15:37

Bhuwan · Accepted Answer · 2018-02-06T15:45:10.227

0

Just wrap your icon, input, button into input-group class.

<div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
  <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
  <span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>

Also you have used col-md-12 wrongly, use row class before it.

Updated Fiddle

edited Feb 06 '18 at 15:45

answered Feb 06 '18 at 15:38

Bhuwan

16,525
5
34
57

it works, but I have another issue, do you have an idea why browse button doesn't open file explorer? – Feb 06 '18 at 15:40
1

@Pepe you have to create a hidden file input for it...see this https://stackoverflow.com/questions/47974175/how-do-i-style-a-file-upload-button/47974444#47974444 – Bhuwan Feb 06 '18 at 15:43

Upload file in one line

2 Answers2