I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear properly.
Below is a screenshot:
My code snippet is as follows:
<div class="row">
<div class="bg">
<div class="col-lg-8">
<h5> Title</h5>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
</div><div class="col-sm-12 col-md-6">
<div id="ParentCaseList_filter" class="dataTables_filter">
<label>Search:<input type="search" class="form-control form-control-sm"
placeholder="" aria-controls="ParentCaseList"></label>
</div>
</div>
</div>
CSS styling applied:
.bg{
border-color: #428bca;
}
#ParentCaseList_filter {
margin-top: -43px;
}
div.dataTables_filter {
text-align: right;
}
.dataTables_filter label {
display: inline-flex !important;
margin-top: 0rem !important;
}
div.dataTables_wrapper div.dataTables_filter label {
font-weight: normal;
white-space: nowrap;
text-align: left;
}