Bing Autosuggest Dropdown Responsive CSS - html

Question

I am testing out the documentation here. The only difference is my searchBox is responsive and has 100% width.
<div id='searchBoxContainer'>
<input type='text' id='searchBox' style="width:100%"/>
</div>
On mobile the searchBoxContainer does not honor the width of the searchBox. The red overhang below expands my mobile app and doesn't feel good.
I have determined I can fix this by setting the as_container max-width equal to the width of the searchBox as it changes.
#as_container {
max-width: width of search box;
}
Is there a way to set the #as_container max-width dynamically as the searchBox width changes? I've fixed this with $(window).resize and a little javascript but I feel like there is CSS to handle this?

Answer 1

Here is what I came up with. It's really simple I would just prefer a CSS solution. In my case the searchBox is responsive to it's container, style="width:100%". On resize I match bings drop down container's max-width to the searchBox. The container's width can be set with #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();
});
In my case the search box is not shown initially and I call FixAutoSuggest() when showing it. If you show it on load you could always fix then as well.
$(document).ready(function () {
FixAutoSuggest();
});
You'll notice in FixAutoSuggest() I put a minimum width of 150px on the bing drop down. That's just personal preference and you can remove that line if you want it to shrink to nothing. Hope this helps someone!