Bing Autosuggest, Dropdown Отзывчивый CSS - PullRequest
Новая
       9

Bing Autosuggest, Dropdown Отзывчивый CSS

1 голос
/ 15 марта 2019

Я тестирую документацию здесь . Разница лишь в том, что мой searchBox отзывчив и имеет 100% ширину. 

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

На мобильном телефоне searchBoxContainer не учитывает ширину searchBox. Красный выступ внизу расширяет мое мобильное приложение и не очень хорошо себя чувствует.

enter image description here

Я определил, что могу это исправить, установив as_container max-width равным ширине searchBox по мере ее изменения. 

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

Есть ли способ динамически установить #as_container max-width при изменении ширины searchBox? Я исправил это с помощью $(window).resize и небольшим JavaScript, но я чувствую, что есть CSS для этого?

1 Ответ

0 голосов
/ 18 марта 2019

Вот что я придумал. Это действительно просто, я бы предпочел решение 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. Это просто личное предпочтение, и вы можете удалить эту строку, если хотите, чтобы она сократилась до нуля. Надеюсь, это кому-нибудь поможет!

...