制表器中的CSS错误[关闭]

问题描述 投票:0回答:1

我对制表器有问题。我们在gridCell中放置了一个下拉列表,但overflow:visible属性在该下拉列表中无效。您可以在图片上看到错误:

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9mejJYdC5wbmcifQ==” alt =“在gridCells上不起作用”>

我将overFlow: visible属性放在tabulator-cell上。我试图将其放在下拉列表中,但将其放在此处没有任何意义(并且不起作用)。我也尝试过z-index,但没有成功...编辑:这里的制表符列代码

{title:"Partenariat", field:"id_partenariat",
                    formatter:function (cell, formatterParams, onRendered) {
                        const cellNumber = cell.getRow().getPosition();
                        const className = "partenariat_cell_" + cellNumber;

                        var arrayPartenariat = "<select name='partenariat[]' class=\"ui dropdown "+className+" \"><option value=\"\">-- vide --</option><?= $this->escapeJs($this->getArray("entreprise_partenariat", 0, 'htmlOption')) ?></select>";

                        onRendered(function() {
                            var dropdownElement = $("."+className);
                            var oldValue = cell.getValue();

                            if(cell.getValue() === undefined) {
                                dropdownElement.dropdown({
                                        onChange: function(value) {
                                            cell.setValue(value);
                                            cell.getRow().getCell("removable").setValue(true);
                                            table.addRow({"removable": false});
                                        }
                                    });
                            } else {
                                dropdownElement.dropdown({
                                    onChange: function(value) {
                                        if(value === oldValue) return;

                                        cell.setValue(value);
                                        cell.getRow().getCell("removable").setValue(true);
                                        table.redraw();
                                    }
                                });
                                dropdownElement.dropdown("set selected", cell.getValue());
                            }
                        });

                        return arrayPartenariat;
                    }
                    }

Hmtl是这样嵌套的:

<div id="example-table" class="tabulator" role="grid" tabulator-layout="fitColumns" style="height: auto;">
     <div class="tabulator-tableHolder" tabindex="0">
       <div class="tabulator-table" style="margin-right: 0px;">
        <div class="tabulator-row tabulator-selectable tabulator-row-even" role="row" style="padding-left: 30px;">
         <div class="tabulator-cell" role="gridcell" tabulator-field="id_partenariat" title="" style="width: 417px; height: 55px;">
          <div class="ui dropdown partenariat_cell_1 selection" tabindex="0">
             <select name="partenariat[]" class="">
               <option value="">-- vide --</option>
               <option value="10">Action de citoyenneté </option>
               <option value="8">Adhérent </option>
               </select><i class="dropdown icon"></i>
               ...
             <select name="partenariat[]" class=""><option value="">-- vide --</option><option value="10">Action de citoyenneté </option>
               <option value="8">Adhérent </option>
               <option value="1">Aucun Partenariat </option>
               <option value="11">Coaching </option>
               <option value="12">Convention partenariat </option>
               ...
              </select>
              <div class="text">Coaching</div>
              <div class="menu" tabindex="-1">
               <div class="item" data-value="10">Action de ...</div>
               <div class="item" data-value="8">Adhérent </div>
              ...

((出于明显的原因,我没有放置所有代码,制表符由jquery生成,因此我的框架上没有代码)。我不知道该怎么办。

感谢您的帮助。

css overflow z-index tabulator
1个回答
0
投票

好吧,我找到了一个解决方案(我不知道为什么上次尝试它不起作用)。-将overflow: visible放在.tabulator.tabulator-tableHolder.tabulator-cell上-并且我在z-index: 999上放置了.tabulator,因为在制表符下面有一些dropdown

© www.soinside.com 2019 - 2024. All rights reserved.