Mofizur Mofizur - 3 months ago 8
CSS Question

removing extra space after a div in boostrap css

In a formgroup i have two element one is label another one is button but i am getting extra spaces between the button and label.
See this fiddle. myFiddle

I want to remove the space between DocumentType and Attach a file

<div class="panel">
<div class="panel panel-info">
<h3> panel heading</h3>
</div>
<div class="panel panel-body">

<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="form-control">Document Type</label>
<label class="fileUpload">
<input id="documentattachment" name="documentattachment" multiple type="file" /> Attach a file
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div id="submitButton">
<button data-bind="click: submitFile" class="form-control">Send</button>
</div>
</div>
</div>
<div class="col-md-6">

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


Thanks

Answer

remove margin on label & also remove this fileUpload

label{margin-bottom:0;}

.fileUpload {
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  border: 2px solid #AAA;
  border-radius: 4px;
  padding: 2px 5px;
  /*margin: 2px;*/
  background: #f2f2f2;
  display: inline-block;
  color: rgba(171, 68, 70, 1);
}

https://jsfiddle.net/yx58b5uL/5/

Comments