Place a button on the input side

1

Follow jsfiddle: link

The first code is correct, but in the second code I put a button on the side and the input got smaller. Why does this happen?

I want to leave the same code equal but with a right-hand button.

See the image:

Where I made a red risk, took up space and I do not understand why.

    
asked by anonymous 25.07.2018 / 22:53

1 answer

3

Just insert a row div and create divisions into columns as in the example:

$(function() {

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="card-body">
  <label>Incorreto</label>
   <div class="form-row" >
  <div class="file-loading">
    <input id="input-b1" name="input-b1" type="file" class="file" data-show-preview="false">
  </div></div>
</div>


<div class="card-body">
<label>Correto</label>
  <div class="row">
    <div class="col-md-10">
      <div class="file-loading">
        <input id="input-b2" name="input-b2" type="file" class="file" data-show-preview="false">
      </div>
    
     </div>
     <div class="col-md-2">
       <button id="delete" type="button" class="btn btn-outline-danger" style="margin-left: 16px;">
      
       <div class="spinner float-right" style="width: 16px; height: 16px;"></div>  
       Apagar vídeo
       </button>
     </div>
    
  </div>
</div>
    
25.07.2018 / 23:23