I'm having challenges with a dropdown list in my project. When I have it on a regular page it works just fine. When I have it in a modal the contents are behind the modal and can't be accessed.
I did some research and see I'm having problems with my z-index. However, I still can't get it to work. I've given the modal a z-index of 3000 and given the dropdown the absolute maximum z-index of 2147483647 and the dropdown still renders behind the modal.
Here is the relevant CSS:
/*trying to get query dropdown on top*/
.dropdown-on-top{
/*position: absolute;*/
z-index: 2147483647;
}
.modal-below-dropdown{
/*position: relative;*/
z-index: 3000;
}
/*end of tring to get query dropdown on top:*/
I'm using model-below-dropdown to set the z-index for the modal. I'm using dropdown-on-top to have the dropdown stay above the modal.
FYI - I've commented out the position items for both because when I had them enabled the modal wouldn't display at all. But, from what I've read I need both of them to make this work.
Here is the HTML for the modal:
<div class="modal modal-message modal-below-dropdown fade" id="modal" style="display: none;">
<div class="modal-dialog modal-below-dropdown">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Create Query</h4>
</div>
</br>
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Query Name</label>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Query Name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Media</label>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Print
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Digital
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Type</label>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="">
Add
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="">
Drop
</label>
</div>
</div>
</div>
</form>
<!-- <hr> -->
<table class="table table-valign-middle m-b-0">
<thead>
<th class="col-md-8">Demographic</th>
<th class="col-md-3"> </th>
<th class="col-md-2">Values</th>
<th class="col-md-1">Operator</th>
<th class="col-md-2"> </th>
</thead>
<tbody>
<tr>
<td class="col-md-8">
<!-- trying jquery autocomplete combo box -->
<div class="ui-widget">
<select id="combobox" class="dropdown-on-top">
<option value="Select one...">Select one...</option>
<option value="Product Registration > Magazine > On File">"Product Registration > Magazine > On File"</option>
<option value="Product Registration > Magazine > BPA Par 3B Source">"Product Registration > Magazine > BPA Par 3B Source"</option>
<option value="Product Registration > Magazine > Promo Key">"Product Registration > Magazine > Promo Key"</option>
<option value="Product Registration > Magazine > Record Status">"Product Registration > Magazine > Record Status"</option>
<option value="Product Registration > Magazine > Subtype">"Product Registration > Magazine > Subtype"</option>
<option value="Product Registration > Magazine > Verification Date">"Product Registration > Magazine > Verification Date"</option>
<option value="Product Registration > Magazine > Activated Date">"Product Registration > Magazine > Activated Date"</option>
</select><span <i class="fa fa-lg fa-sort-desc"></span>
</div>
<!-- end trying jquery autocomplete combo box -->
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td> </td>
</td>
</tr>
<tr>
<td class="col-md-4">
<select class="form-control">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td> </td>
</td>
</tr>
<tr>
<td class="col-md-4">
<select class="form-control">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td class="text-left"><i class="fa fa-lg fa-plus-circle"></i></td>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-sm btn-primary">Save Query</a>
<a href="javascript:;" class="btn btn-sm btn-white" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
<!-- End Add Query -->
All help is greatly appreciated.
