jquery - Dropdown Contents below Modal -
i'm having challenges dropdown list in project. when have on regular page works fine. when have in modal contents behind modal , can't accessed.
i did research , see i'm having problems z-index. however, still can't work. i've given modal z-index of 3000 , given dropdown absolute maximum z-index of 2147483647 , dropdown still renders behind modal.
here relevant css:
/*trying query dropdown on top*/ .dropdown-on-top{ /*position: absolute;*/ z-index: 2147483647; } .modal-below-dropdown{ /*position: relative;*/ z-index: 3000; } /*end of tring query dropdown on top:*/ i'm using model-below-dropdown set z-index modal. i'm using dropdown-on-top have dropdown stay above modal.
fyi - i've commented out position items both because when had them enabled modal wouldn't display @ all. but, i've read need both of them make work.
here html 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 appreciated.
the jquery plugin hide original select <select id="combobox"> , apply other html tags. so, write css hidden ones won't change thing.
you should use ui-autocomplete.ui-menu css selector style dropdown.
try:
.ui-autocomplete.ui-menu { z-index: 3001; } 
Comments
Post a Comment