Mixing
Dropdown-menu is under the input-group-btn
0
I have a 6 input-group-btn but the issue is when I click on a dropdown button, the dropdown-menu is shown behind the input-group-btn :
I tried z-index:0; but seems to be not working :
<div id="indica-evolu-mobile" class="col-xs-12 collapse hidden-lg hidden-md">
<button type="button" class="close">×</button>
<div id="indica-mobile" class="row well-sm theme-color margin-mobile-menu">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Zone géographique</h2>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop">
<div id="basins" class="input-group-btn chelect disabled" name="basins" data-model="Basins" data-model-id="1" data-next="Perimeters">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#1bcef7" disabled>Bassins</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu" style = "color:black;">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="perimeters" class="form-control" name="perimeters" data-model="Perimeters" data-model-id="2" data-previous="Basins" data-next="Sectors">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d84b38" disabled>Périmètres</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="sectors" class="form-control" name="sectors" data-model="Sectors" data-model-id="3" data-previous="Perimeters" data-next="Blocks">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d87837" disabled>Secteurs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="blocks" class="form-control" name="blocks" data-model="Blocks" data-model-id="5" data-previous="Sectors" data-next="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d8cf37" disabled>Blocs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="exploitations" class="form-control" name="exploitations" data-model="Exploitations" data-model-id="6" data-previous="Blocks" data-next="Crops">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d8bf" disabled>Exploitations</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="crops" class="form-control" name="crops" data-model="Crops" data-model-id="7" data-previous="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d857" disabled>Parcelles</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top:35px">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Paramètre</h2>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="parametertypes" style = "color: White;">Paramètre</label>
<select id="parametertypes">
<option value="" selected disabled>Sélectionner un paramètre</option>
</select>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="dates-list" style = "color:white;">Date</label>
<input id="dates-list" type="text" class="form-control date-list indica_date_input" placeholder ="Sélectionner une date" value="">
</div>
</div>
</div>
</div>
</div>
</div>
I was told to to put each input inside a div, but this doesn't seem to be a good idea. If you have an idea about what could be the cause of this behavior I would be pleased to know.
html css twitter-bootstrap
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
add a comment |
0
I have a 6 input-group-btn but the issue is when I click on a dropdown button, the dropdown-menu is shown behind the input-group-btn :
I tried z-index:0; but seems to be not working :
<div id="indica-evolu-mobile" class="col-xs-12 collapse hidden-lg hidden-md">
<button type="button" class="close">×</button>
<div id="indica-mobile" class="row well-sm theme-color margin-mobile-menu">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Zone géographique</h2>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop">
<div id="basins" class="input-group-btn chelect disabled" name="basins" data-model="Basins" data-model-id="1" data-next="Perimeters">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#1bcef7" disabled>Bassins</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu" style = "color:black;">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="perimeters" class="form-control" name="perimeters" data-model="Perimeters" data-model-id="2" data-previous="Basins" data-next="Sectors">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d84b38" disabled>Périmètres</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="sectors" class="form-control" name="sectors" data-model="Sectors" data-model-id="3" data-previous="Perimeters" data-next="Blocks">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d87837" disabled>Secteurs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="blocks" class="form-control" name="blocks" data-model="Blocks" data-model-id="5" data-previous="Sectors" data-next="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d8cf37" disabled>Blocs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="exploitations" class="form-control" name="exploitations" data-model="Exploitations" data-model-id="6" data-previous="Blocks" data-next="Crops">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d8bf" disabled>Exploitations</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="crops" class="form-control" name="crops" data-model="Crops" data-model-id="7" data-previous="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d857" disabled>Parcelles</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top:35px">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Paramètre</h2>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="parametertypes" style = "color: White;">Paramètre</label>
<select id="parametertypes">
<option value="" selected disabled>Sélectionner un paramètre</option>
</select>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="dates-list" style = "color:white;">Date</label>
<input id="dates-list" type="text" class="form-control date-list indica_date_input" placeholder ="Sélectionner une date" value="">
</div>
</div>
</div>
</div>
</div>
</div>
I was told to to put each input inside a div, but this doesn't seem to be a good idea. If you have an idea about what could be the cause of this behavior I would be pleased to know.
html css twitter-bootstrap
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49
add a comment |
0
0
0
I have a 6 input-group-btn but the issue is when I click on a dropdown button, the dropdown-menu is shown behind the input-group-btn :
I tried z-index:0; but seems to be not working :
<div id="indica-evolu-mobile" class="col-xs-12 collapse hidden-lg hidden-md">
<button type="button" class="close">×</button>
<div id="indica-mobile" class="row well-sm theme-color margin-mobile-menu">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Zone géographique</h2>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop">
<div id="basins" class="input-group-btn chelect disabled" name="basins" data-model="Basins" data-model-id="1" data-next="Perimeters">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#1bcef7" disabled>Bassins</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu" style = "color:black;">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="perimeters" class="form-control" name="perimeters" data-model="Perimeters" data-model-id="2" data-previous="Basins" data-next="Sectors">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d84b38" disabled>Périmètres</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="sectors" class="form-control" name="sectors" data-model="Sectors" data-model-id="3" data-previous="Perimeters" data-next="Blocks">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d87837" disabled>Secteurs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="blocks" class="form-control" name="blocks" data-model="Blocks" data-model-id="5" data-previous="Sectors" data-next="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d8cf37" disabled>Blocs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="exploitations" class="form-control" name="exploitations" data-model="Exploitations" data-model-id="6" data-previous="Blocks" data-next="Crops">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d8bf" disabled>Exploitations</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="crops" class="form-control" name="crops" data-model="Crops" data-model-id="7" data-previous="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d857" disabled>Parcelles</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top:35px">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Paramètre</h2>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="parametertypes" style = "color: White;">Paramètre</label>
<select id="parametertypes">
<option value="" selected disabled>Sélectionner un paramètre</option>
</select>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="dates-list" style = "color:white;">Date</label>
<input id="dates-list" type="text" class="form-control date-list indica_date_input" placeholder ="Sélectionner une date" value="">
</div>
</div>
</div>
</div>
</div>
</div>
I was told to to put each input inside a div, but this doesn't seem to be a good idea. If you have an idea about what could be the cause of this behavior I would be pleased to know.
html css twitter-bootstrap
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
I have a 6 input-group-btn but the issue is when I click on a dropdown button, the dropdown-menu is shown behind the input-group-btn :
I tried z-index:0; but seems to be not working :
<div id="indica-evolu-mobile" class="col-xs-12 collapse hidden-lg hidden-md">
<button type="button" class="close">×</button>
<div id="indica-mobile" class="row well-sm theme-color margin-mobile-menu">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Zone géographique</h2>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop">
<div id="basins" class="input-group-btn chelect disabled" name="basins" data-model="Basins" data-model-id="1" data-next="Perimeters">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#1bcef7" disabled>Bassins</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu" style = "color:black;">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="perimeters" class="form-control" name="perimeters" data-model="Perimeters" data-model-id="2" data-previous="Basins" data-next="Sectors">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d84b38" disabled>Périmètres</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="sectors" class="form-control" name="sectors" data-model="Sectors" data-model-id="3" data-previous="Perimeters" data-next="Blocks">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d87837" disabled>Secteurs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="blocks" class="form-control" name="blocks" data-model="Blocks" data-model-id="5" data-previous="Sectors" data-next="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d8cf37" disabled>Blocs</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="exploitations" class="form-control" name="exploitations" data-model="Exploitations" data-model-id="6" data-previous="Blocks" data-next="Crops">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d8bf" disabled>Exploitations</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
<div class="col-xs-12 select-prop" style="margin-top:10px">
<div class="input-group-btn chelect disabled" id="crops" class="form-control" name="crops" data-model="Crops" data-model-id="7" data-previous="Exploitations">
<button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d857" disabled>Parcelles</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top:35px">
<div class="col-xs-12">
<h2 class="text-white-sans-serif">Paramètre</h2>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="parametertypes" style = "color: White;">Paramètre</label>
<select id="parametertypes">
<option value="" selected disabled>Sélectionner un paramètre</option>
</select>
</div>
</div>
<div class="row row-select center-vertically" style= "position:relative; z-index:0;">
<div class="col-xs-12 select-prop">
<label for="dates-list" style = "color:white;">Date</label>
<input id="dates-list" type="text" class="form-control date-list indica_date_input" placeholder ="Sélectionner une date" value="">
</div>
</div>
</div>
</div>
</div>
</div>
I was told to to put each input inside a div, but this doesn't seem to be a good idea. If you have an idea about what could be the cause of this behavior I would be pleased to know.
html css twitter-bootstrap
html css twitter-bootstrap
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
asked Jan 1 at 20:05
zakaria mouqcitzakaria mouqcit
193111
193111
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49
add a comment |
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998562%2fdropdown-menu-is-under-the-input-group-btn%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998562%2fdropdown-menu-is-under-the-input-group-btn%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you display a graphic of what this should look like?
– fauverism
Jan 2 at 2:21
Thank you for your response, I solved the problem. Actually I had a z-index:2 on the input that makes it placed on top of the dropdown. Removed it and the issue is solved
– zakaria mouqcit
Jan 2 at 7:49