Width-Bug

Firefox bug: the width of the dropdown is 100 when it is hidden and 150 when it is shown.

by Patrick Hund

HTML

<div id="popup">
    <div class="row">
        <div class="col">
            <select>
                <option>wurst</option>
                <option>käse</option>
            </select>
        </div>
        <div class="col">
            <select>
                <option>pizza</option>
                <option>pasta</option>
            </select>
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<button>open</button>
<br>
<br>
<br>
<br>
<div id="console"></div>

CSS

#popup {
    position: absolute;
    display: none;
    padding: 10px;
    background-color: hotpink;
    border: 2px solid purple;
    border-radius: 10px;
    width: 320px;
}
.col {
    float: left;
    padding-right: 10px;
    width: 150px;
}
select {
    width: 100%;
}

#console {
    background-color: black;
    color: lime;
    font-family: monospace;
    min-height: 30px;
    width: 500px;
}

JavaScript

// Firefox bug: the width of the dropdown is 100 when it is
// hidden and 150 when it is shown

$("button").click(function () {
    $("#popup").show();
    logInfo();
});

function log(msg) {
    $("#console").append(msg + "<br>");
};

function logInfo() {
    log("left: " + $("select").first().position().left);
    log("width: " + $("select").first().outerWidth());
}
logInfo();