Wrap element breaks bootstrap's form-group

[vincentwhales]

<div class="form-group row required ">
    <div class="col-sm-10">
        <div class="awesomplete">
           <input class=" required input-xlarge form-control" id="my_input" name="moneypage_url" required="" type="text" value="" with_label="" autocomplete="off" aria-autocomplete="list">
          ... 

When Awesomplete is invoked on #my_input this breaks the recommended styling by bootstrap.

Is there a way to NOT have awesomplete wrap a <div> around the input?

[superhawk610]

I ran into this same problem, turns out adding the additional div inside .form-group or .input-group changes the display to block instead of table, so you just need to change a few styles to get things back in order (not a permanent solution, but it does the job). Here's the solution I cooked up (it uses jQuery, but you could probably do without it):

$.get({
  url: '../data/contacts.php',
  success: function(response) {
    new Awesomplete($('#contact-search')[0], { list:response.data.map(function(i) { return { label: i.Name, value: i.ContactID }; }) });
    $('.awesomplete').addClass('input-group').css('display', 'table').parent().css('display', 'block');
    $('.input-group-addon').appendTo('.awesomplete');
  }
});

You basically just want to move any addons into the newly created div, change its display to table, then override the original .input-group's display to block. Finally, this will offset the Awesomplete results window slightly, so you need to edit the CSS to accomodate that. Just change the rule as follows:

.awesomplete > ul {
  margin: 3em 0 0;
}

The higher margin-top pushes it down and it should appear as normal.

[jmcd]

I did this. Instead of letting Awesomplete create a container element, I return the parent of the input element (the form-group div).

var awsomepleteOpts = {
        // ... other options here, like minChars
        container: function(input) {
            input.parentNode.className = input.parentNode.className + " awesomplete";
            input.parentNode.style.display = "block";
            return input.parentNode;
        }
};

[LukaszJaro]

Nice solution @jmcd, just wanted to add for bootstrap 4, it should be: input.parentNode.style.display = "flex";

Then I did add some margin-top: 2.3em to .awesomplete > ul as suggested by @superhawk610