I am trying to put a dash '-' between two text boxes in a single bootstrap row. I currently have it without a dash, and when I put it in it appends the '-' above the text box rather than next to it.
My code looks like the following (it's using angular 2 with prime-ng library):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
I want it to look like this
If possible I would like it to have equal spacing between the four elements as well.
Thanks in advance
Just try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<style>
.bdr {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 15px;
height: 2px;
background-color: #000;
}
#media only screen and (max-width: 550px) {
.mt_10 {
margin-top: 5px;
margin-bottom: 5px;
}
.bdr {
height: 15px;
width: 2px;
}
.mb_40 {
margin-bottom: 40px;
}
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12">
<div class=" col-xs-12 col-sm-3 mt_10">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-xs-12 col-sm-7" style="position:relative; padding:0;">
<div class="col-xs-12 col-sm-6 mt_10 mb_40">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="bdr"></div>
<div class="col-xs-12 col-sm-6 mt_10">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-xs-12 col-sm-2 mt_10">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
</body>
</html>
You can also use bootstrap to split up the input fields and add a - in between like so, this would give you much more flexibility:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-8 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-1 col-xs-1">
<strong>-</strong>
</div>
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
try to add a -
and add some css style like
.dash {
float:left;
width:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">
<select style="width:100%"><option></option></select>
</div>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<b class="dash">-</b>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-xs-3">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
div{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-6">
<b>-</b>
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
Related
var count = 2;
var countMax = 5;
function adddt() {
if (count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.
you can do like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>
function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;" instead of "display: block;" it will work.
I'm having the following problem in my form has two dates of type varchar
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_cadastro">Cadastrado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_cadastro" name="areareal_cadastro" value="<?= $construct_areareal['areareal_cadastro']; ?>" class="form-control">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_atualizar">Atualizado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_atualizar" name="areareal_atualizar" value="<?= $construct_areareal['areareal_atualizar']; ?>" class="form-control">
</div>
</div>
</div>
</div>
But in the console I get the following error, being that I'm not declaring this variable anywhere.
try this js use library too.
$('#input_id').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
You Have to add Below CSS and Javascript
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.2.min.js"></script></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
why can't get input elements when add dynamic input? but i can get input elements while not add dynamic input!
$('#getInputBtn').click(function() {
var myForm = $('#testForm').find(':input')
console.log(myForm)
})
$('#addInputBtn').click(function() {
var inputStr = '<div style="background: #F6F7F8; padding: 10px 0; margin-bottom: 10px;"><div class="row" style="margin-bottom: 10px;"><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="nodeType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">nodeType</label><input id="nodeType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="areaType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">areaType</label><input id="areaType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div></div><div class="row"><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="countType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">countType</label><input id="countType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="form-item" style="width: 100%"><label for="contractType" class="form-item-label-required col-md-4 col-sm-4 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;">contractType</label><input id="contractType" class="col-md-8 col-sm-8 col-xs-12" required></input></div></div></div></div>'
$('#small').html(inputStr)
})
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<form action="" id="testForm">
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-item" style="width: 100%">
<label for="orgTypeList" class="form-item-label-required col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">orgType</label>
<input id="orgTypeList" class="col-md-10 col-sm-10 col-xs-12" style="width: 84%" required readonly />
</div>
</div>
</div>
<div id="small"></div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-item" style="width: 100%">
<label for="positionList" class="form-item-label form-item-label col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">position</label>
<input id="positionList" class="ui-input col-md-10 col-sm-10 col-xs-12 " style="width: 84%;" readonly />
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-item" style="width: 100%">
<label for="postList" class="form-item-label col-md-2 col-sm-2 col-xs-12" style="padding-right: 20px;line-height: 40px;text-align: right;width: 16%;">post</label>
<input id="postList" class="ui-input col-md-10 col-sm-10 col-xs-12 tagsinput" style="width: 84%;" readonly />
</div>
</div>
</div>
</form>
<button id="getInputBtn">getInput</button>
<button id="addInputBtn">add Dynamic INPUT</button>
Codepen：
Change your selector to:
$('#getInputBtn').click(function() {
var myForm = $('#testForm :input');
console.log(myForm);
});
It's working but I am not 100% sure why. I'll check and explain later. For now, you can at least fix your code.
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<button >add</button>
<button >negative</button>
<?php form_submit('name',value); ?>
//so all button which are comes in between from open and form close linked with form_open
<?php form_close(); ?>
//so all button which are comes in between from open and form close linked with form_open
Please check the below code and it works perfect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple CodeIgniter App - Todos</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<a href="Home/new">
<?php echo form_button('add','add'); ?>
<!-- <button type>add</button> -->
</a>
<a href="Home/new">
<?php echo form_button('negative','negative'); ?>
<!-- <button type>negative</button> -->
</a>
<?php echo form_submit('name','btn_name'); ?>//so all button which are comes in between from open and form close linked with form_open
<?php echo form_close(); ?>
</body>
</html>
If you do not want that HTML BUTTON act like Submit, you need to add the tag type="button".
<form>
<button>This button submit</button>
<button type="button">This button DO NOT submit</button>
<!-- Default attribute type value is "submit" -->
</form>
i figure it out why that is happening...
that is happening because of button tag which is in between the form_open tag and form_close tag as i change button tag to div than it is working perfectly....
so there is the conclusion when you submit the form never use any kind of button tag use only div tag ,span tag etc.
I have one leaflet map and 2 div section with some content.
<body>
<div class="row showEquipmentDetails" style="margin:10px;">
<button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<div id="map">
</div>
</body>
<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>
Am doing hide and show of 2 div section its placed on out side of the map. But I need to hide and show it above the map,so I wrote like this
<div id="map">
<div class="row" style="margin:10px;">
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
</div>
But click events are not working on map. when I click on first button, map is getting zoomed .click events are not fired. why? How can I achieve it?any suggestion?Thanks!!
Map is not loading to me. But check whether this solution is working for you,
var mymap = L.map('map').setView([51.505, -0.09], 13);
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
#container {
width: 650px;
height: 350px;
position:relative
}
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.EquipmentContent {
width: 90%;
height: 90%;
position: absolute;
top:8px;
left: 45px;
}
.showEquipmentDetails {
width: 40px;
height: 40px;
position: absolute;
top:8px;
left: 45px
}
#EquipmentContent {
z-index: 10;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<div id="container">
<div id="map"></div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
</div>
Got solution.By adding the following style I am getting the expected result
.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}