I am experiencing a strange issue. I am using Ajax to load the Search form. The CSS is being applied correctly, but there is an unusual problem with the bottom margin. The bottom margin only appears when you scroll down in mobile view.
When you load the form via Ajax in mobile view
https://i.sstatic.net/jihV4.png
And when you scroll down on mobile, the bottom margin is automatically added.
https://i.sstatic.net/LSqeT.png
I am confused about what is causing this issue.
Here is a snippet of my code:
<div class="form-group col-md-6 col-sm-6 col-lg-4 no-margin manage_boot" >
<div class="col-sm-4 col-xs-4 col-lg-4 col-md-4 no-padding search_title" >Gender:</div>
<div class="selector col-md-8 col-sm-8 col-lg-8 col-xs-8 no-padding">
<!-- select box -->
</div>
</div>
<!--Nationality-->
<div class="form-group col-md-6 col-sm-6 col-lg-4 no-margin manage_boot" >
<div class="col-sm-4 col-xs-4 col-lg-4 col-md-4 no-padding search_title" >Nationality:</div>
<div class="selector col-md-8 col-sm-8 col-lg-8 col-xs-8 no-padding">
<!-- select box -->
</div>
</div>
Here is my Ajax code:
$.ajax({
url:'<?= SUB_URL ?>/services_html/more_advance_search',
type:'post',
data:{where_condition:1},
success:function (data) {
$('#search_collapse').html(data);