簡體   English   中英

選擇下拉列表重疊

[英]selectize dropdown is overlapped

你好,我正在使用 selectize 來制作標簽,但問題是我讓 selectize 下拉菜單與其他 div 重疊。

我在做什么就像

   <div style='width:300px;height:40px;float:left;'> // if needed i can modify this div css
   <?=functionToGetTags();?> // this is the function which is called here ...
   </div>

PHP

 function functionToGetTags(){
       <script src="tags/selectize.js"></script>
    <link rel="stylesheet" href="tags/selectize.default.css"/>
    <div class="control-group">
             <select id="<?=$getid_i?>" multiple name="dept[]" class="demo-default" >
                 <option value=""><?=$placehol?></option>
                  <?php if ($tagwhats =='depts'){
              // something to get ....
              } else if($tagwhats =='skills'){
               // something here ...
              } ?>
             </select>
          </div>
        <script>
              var eventHandler = function(name) {
            return function() {
                console.log(name, arguments);
                $('#log').append('<div><span class="name">' + name + '</span></div>');
            };
        };
        var $select = $('#'+"<?=$getid_i?>").selectize({
            create          : true,
            onChange        : eventHandler('onChange'),
            onItemAdd       : eventHandler('onItemAdd'),
            onItemRemove    : eventHandler('onItemRemove'),
            onOptionAdd     : eventHandler('onOptionAdd'),
            onOptionRemove  : eventHandler('onOptionRemove'),
            onDropdownOpen  : eventHandler('onDropdownOpen'),
            onDropdownClose : eventHandler('onDropdownClose'),
            onFocus         : eventHandler('onFocus'),
            onBlur          : eventHandler('onBlur'),
            onInitialize    : eventHandler('onInitialize'),
            });
            </script> 
 }

唯一的問題是下拉菜單是重疊的,其他工作正常,請給我一些我試過搞亂 z-index 和 position absolute 的建議。 沒有幫助..

忘記selectize.css類。 對我有用的是:
使用以下內容創建另一個類:

.myNewClass {
  position: absolute !important;
  z-index: 999;
}

並將此類放在您的<select>標記中。
之后,您應該重新調整元素,但是問題可能會解決。

添加selectize參數dropdownParent:'body'

select.selectize({
    dropdownParent:'body',
    delimiter: obj.delimiter,
    openOnFocus:true,
})

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM