我对制表器有问题。我们在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生成,因此我的框架上没有代码)。我不知道该怎么办。
感谢您的帮助。
好吧,我找到了一个解决方案(我不知道为什么上次尝试它不起作用)。-将overflow: visible
放在.tabulator
,.tabulator-tableHolder
,.tabulator-cell
上-并且我在z-index: 999
上放置了.tabulator
,因为在制表符下面有一些dropdown
。