javascript - 制表编辑器选择下拉菜单无法正常工作

Question

我正在使用制表机。表有一个带有选择编辑器的列。

问题是如果下拉菜单从窗口溢出，下拉菜单不会显示。但是，如果我没有设置width: 900px表格所在的 div 的宽度。如果窗口很小并且出现水平滚动，它也可以正常工作。我真的想要最小 980px 宽度，否则工具提示无法正常工作。如何每次正确呈现下拉菜单？

要更好地查看问题，请查看此视频。

制表符表的代码

var column = [
{title: "No", field:"row_number", align:"center", width:55, frozen:true, cssClass: "disable_edit"},
{title: messages_etc_data["WEB_0600_002_001"], field: "class_notation", width: 180, align: "left", editor: false, frozen:true, headerFilter:true, cssClass: "disable_edit"}, //種別
{title: messages_etc_data["WEB_0600_002_002"], field: "code_notation", width: 180, align: "left", editor: false, frozen:true, headerFilter:true, cssClass: "disable_edit"},  //名称
{title: messages_etc_data["WEB_0600_002_003"]+"<label class=\"required\"></label><a id='t_ancher1'><img class='book'></a>", field: "ztotal_external_code", width: 170, 
        align: "left", editor: "select", cssClass: "editable_column", editorParams:{ values:param_shiharai_media_lookup}, validator:[ztotal_validator]},   //ZTOTAL出力
{title: "登録", field: "ztotal_null_flg", width: 20, align: "center", editor: false, visible: false, formatter:"lookup", formatterParams:{"0":"◯", "1":"✕"}},
{   // Column group
    title: messages_etc_data["WEB_0600_002_004"],
    align: "left",
    columns: [
        {title: messages_etc_data["WEB_0600_002_005"]+"<label class=\"required\"></label><a id='t_ancher2'><img class='book'></a>", field: "ttend_external_code_1", width: 160, 
            align: "center", editor: "input", tooltip: messages_etc_data["WEB_0600_000_025"], cssClass: "editable_column", validator:["maxLength: 2"], 
            mutatorEdit:zero_padding, mutatorEditParams:{length_with_pad:2}},  //メディア種別
        {title: messages_etc_data["WEB_0600_002_006"]+"<label class=\"required\"></label><span class=\"help-tooltip\" data-toggle=\"tooltip\" data-placement=\"left\" data-html=\"true\"></span>", 
            field: "ttend_external_code_3", width: 160, align: "left", editor: "input", tooltip: messages_etc_data["WEB_0600_000_026"], cssClass: "editable_column",
            validator:["maxLength: 3"], mutatorEdit:zero_padding, mutatorEditParams:{length_with_pad:3}},    //券種コード
        {title: "登録", field: "ttend_null_flg", width: 20, align: "center", editor: false, visible: false, formatter:"lookup", formatterParams:{"0":"◯", "1":"✕"}}
    ]
}
];

// テーブル設定
table_data_div = new Tabulator("#tabs-1_1",
{
    data: query_parsed_data,
    headerFilterPlaceholder: column_filter_placeholder,
    columns: column,
    rowMouseOver: hover_over_color,
    rowMouseOut: hover_out_color,
    cellEdited: shiharai_newaribiki_cell_edit_callback, // Custom callback function
    rowFormatter: shiharai_newari_row_formatter         // Custom row formatter
});
document.getElementById("shiharai_media").style.pointerEvents = "none";

此处为整页的 HTML 粘贴。我写的代码在文件标题行之后v_tec_cooperation.php

标签： javascriptcsstabulator