Bing Autosuggest Dropdown响应式CSS

Question

我正在测试documentation here。唯一的区别是我的searchBox响应迅速，宽度为100％。

<div id='searchBoxContainer'>
   <input type='text' id='searchBox' style="width:100%"/>
</div>

在移动设备上，searchBoxContainer不尊重searchBox的宽度。下面的红色悬伸扩展了我的移动应用程序并且感觉不舒服。

我已经确定我可以通过将as_container max-width设置为等于searchBox的宽度来解决这个问题。

#as_container { 
max-width: width of search box;
}

有没有办法在#as_container max-width宽度变化时动态设置searchBox？我用$(window).resize和一些小javascript修复了这个问题，但我觉得有CSS来处理这个问题？

Answer 1

这就是我想出的。这很简单我只是喜欢CSS解决方案。在我的情况下，searchBox响应它的容器，style="width:100%"。在调整大小时我匹配bings下载容器的max-width到searchBox。容器的宽度可以用#as_container设置。

        // Our responsive fix for the autosuggest is to limit it's max width to the dropdown container. (Assuming our searchBox is responsive, we'll match widths)
        function FixAutoSuggest() {
            try {
                var css = document.getElementById("autoSuggestFix");
                // Create a CSS element for our fix if it hasn't been created already.
                if (!css) {
                    css = document.createElement("style");
                    css.setAttribute("id", "autoSuggestFix");
                    css.type = "text/css";
                    document.body.appendChild(css);
                }
                // Set the appropriate width for our auto suggest container.
                var searchBox = document.getElementById('searchBox')
                if (searchBox != null) {
                    var bb = searchBox.getBoundingClientRect(), columnWidth = bb.right - bb.left;
                    // We set column width minimum to 150.
                    columnWidth = ((columnWidth > 150) ? columnWidth : 150);
                    css.innerHTML = "#as_container { max-width: " + columnWidth + "px }";
                }
            }
            catch (err) {
                alert('FixAutoSuggest' + err);
            }

        }

        $(window).resize(function () {
            FixAutoSuggest();
        });

在我的情况下，搜索框最初没有显示，我在显示时调用FixAutoSuggest()。如果你在加载时显示它，你也可以随时修复它。

 $(document).ready(function () {
        FixAutoSuggest();
    });

你会注意到在FixAutoSuggest()我把最小宽度的150px放在bing下降。这只是个人偏好，你可以删除该行，如果你希望它缩小到零。希望这有助于某人！