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

Using CefSharp with WPF. I have several select elements in my pages and some of them are near the bottom of the browser. When the selects open, they open down instead of up so that user can select the options. Because they open down, they extend past the edge of the browser which clips the drawing window. The options are hidden due to this clipping.

The standard HTML works perfectly in Chrome and other webkit browsers in that the options display above the select elements that are near the bottom of the page.

<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

JQuery solution:

Calling this function with the overall parent container will setup a way to fit your select/drop-down in the page and works with CEF Sharp.

Adding class selFixer to the select in question with a size sf3, sf6, sf8 or sf12 will provide that many rows in the popup selector. The default row conut is 4. I am using this in production/released code. The only thing that doesn’t work is trying to reselect the original value. Pressing tab (blur) will close the drop down.

You may want to tweak the font and row height to fit your deployment.

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;
        }
    }
}

Usage:

<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>