CEFSharp Dropdown（组合框，select）向下打开超过浏览器边缘并被剪裁

Question

将 CefSharp 与 WPF 结合使用。我的页面中有几个 select 元素，其中一些元素靠近浏览器底部。当 select 打开时，它们会向下打开而不是向上打开，以便用户可以 select 选项。因为它们向下打开，所以它们延伸超过了裁剪绘图的浏览器边缘 window。由于此剪辑，选项被隐藏。

标准 HTML 在 Chrome 和其他 webkit 浏览器中完美运行，因为选项显示在靠近页面底部的 select 元素上方。

<select class="cSel" id="TAG_RV50_ENA_ALERT_TIMEOUT">
    <option value="0" selected="selected">Off</option>
    <option value="5">  5 min</option>
    <option value="15"> 15 min</option>
    <option value="30"> 30 min</option>
    <option value="60">  1 h</option>
</select>

Answer 1

JQuery解法：

使用整个父容器调用此函数将设置一种适合您的 select/drop-down 页面并与 CEF Sharp 一起使用的方法。

将大小为 sf3、sf6、sf8 或 sf12 的 class selFixer 添加到有问题的 select 将在弹出窗口中提供那么多行 selector。默认行数是 4。我在 production/released 代码中使用它。唯一不起作用的是尝试重新 select 原始值。按 Tab（模糊）将关闭下拉菜单。

您可能需要调整字体和行高以适合您的部署。

function setupSelFixer(contain) {
    if (!window.IsLocal) {
        contain.find(".selFixer").on("mousedown", function (ev) {
            //console.log("selFixer mouseDown.");
            var _this = $(this);
            var size = 4;
            if (_this.hasClass("sf6")) {
                size = 6;
            } else if (_this.hasClass("sf3")) {
                size = 3;
            } else if (_this.hasClass("sf8")) {
                size = 8;
            } else if (_this.hasClass("sf12")) {
                size = 12;
            }
            //console.log("ht:", this.style.height);
            if (this.options.length >= size) {
                this.size = size;
                this.style.height = (18 * size) + "px";
                this.style.marginBottom = (-18 * (size - 1)) + "px";
                this.style.position = "relative";
                this.style.zIndex = 10009;
            }
        });
        //onchange
        contain.find(".selFixer").on("change select", function () {
            //console.log("selFixer Change.");
            resetSelFixer(this);
        });
        //onblur
        contain.find(".selFixer").on("blur", function () {
            resetSelFixer(this);
        });
        function resetSelFixer(el) {
            el.size = 0;
            el.style.height = "";
            el.style.marginBottom = "0px";
            el.style.zIndex = 1;
        }
    }
}

用法：

<div id="someParent">
<select id="fred" class="selFixer sf6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
</div>

<script>
// You can call setupSelFixer with either "fred" or "someParent"
setupSelFixer($("#someParent"));
</script>

CEFSharp Dropdown（组合框，select）向下打开超过浏览器边缘并被剪裁

CEFSharp Dropdown (combobox, select) open down past the edge of the browser and are clipped

javascript

html

wpf

cefsharp

chromium-embedded