Mohammad Areeb Siddiqui Mohammad Areeb Siddiqui - 4 months ago 22
CSS Question

Unwanted space above Input-type File

I am creating a form using bootstrap and have edited a few styles. Here's a fiddle.



<div class="form-group">
<label for="email" class="col-sm-3 control-label">Logo</label>
<div class="col-sm-7">
<input type="file" name="logo" id="logo" placeholder="Logo" autofocus="" required="" class="form-control">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-7">
<textarea name="address" id="address" placeholder="Address" required="" class="form-control"></textarea>
</div>
</div>




.form-control {
padding: 20px 15px;
border: 3px solid #eee;
background-color: #f9f9f9;
box-shadow: none;
}


In the fiddle you can see that the address textarea is perfectly fine whereas the file input is attached to the bottom of the input field. How do I make it right? I have tried removing the padding, margins, setting line height to 0 but nothings makes a it different.

Answer

This is happening because of the height that is applied to .form-control. And as you've applied padding of 20px vertical to the .form-control the file upload button is placed at 20px from the top of its container.

If you want to place the file upload button vertically center, apply auto height to the file input.

#logo {
    height: auto;
}

Demo

#logo {
  height: auto;
}
.form-control {
  padding: 20px 15px;
  border: 3px solid #eee;
  background-color: #f9f9f9;
  box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="email" class="col-sm-3 control-label">Logo</label>
  <div class="col-sm-7">
    <input type="file" name="logo" id="logo" placeholder="Logo" autofocus="" required="" class="form-control">
  </div>
</div>
<div class="form-group">
  <label for="address" class="col-sm-3 control-label">Address</label>
  <div class="col-sm-7">
    <textarea name="address" id="address" placeholder="Address" required="" class="form-control"></textarea>
  </div>
</div>

Comments