Width override of easyAutocomplete plugin inside input-group-addon

Question

I have an input box in a form. I am using the easyautocomplete plugin in this input box. When I have input box outside the input-group-addon the input box has proper width. But, when I add it inside the input-group-addon, the width is reduced/collapsed. (See screenshots)

HTML With input-group-addon

<div class="form-group col-md-9">
  <label for="taskname">Task Name</label>
  <div class="input-group">
    <span class="input-group-addon"><i class="fas fa-anchor"></i></span>
    <input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" value="<?php echo h($dataset['taskname']); ?>">
  </div>
  <small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>

HTML Without input-group-addon

<div class="form-group col-md-9">
  <label for="taskname">Task Name</label>
    <input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" value="<?php echo h($dataset['taskname']); ?>">
  <small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>

Javascript

$("#taskname").easyAutocomplete(tasknameoption);
var tasknameoption = {
  url: "/task/tasklistapi.php",
  getValue: "tasklistname",
  adjustWidth: false,
  requestDelay: 500,
  list: {
    maxNumberOfElements: 10,
    match: {enabled: true},
    onSelectItemEvent: function() {
      var value = $("#taskname").getSelectedItemData().iscomp;
      $("#iscomp").val(value).trigger("change");
    }
  }
};

When the above javascript is commented, the form looks as below

Things I have Tried (but did not work):

1. Adding adjustWidth: false in the options as per Github
2. Added inline CSS as per SO and SO

Answer 1

Apparently the EasyAutocomplete plugin wraps the <input class="form-control"> into an additional <div class="easy-autocomplete"> element. With that modification it breaks the Bootstrap markup necessary for proper input-group styling. Unfortunately, I did not find an option for EasyAutocomplete to control how it changes the DOM.

In order to overcome this, you have two workarounds that I can think of.

• You could modify the Bootstrap css to address the new markup. The easiest way to do this would be to recompile the modified scss files into a new css. However this could also lead to an error prone result.
• The second option however is to further modify the markup a bit with javascript.

I think the latter one is far more the easiest way to do it, so I demonstrate that in the example below.

// Init `easyAutocomplete`
var tasknameoption = {
    adjustWidth: false,
    data: ["blue", "green", "pink", "red", "yellow"]
};
$("#taskname").easyAutocomplete(tasknameoption);

// Fixing markup
$('.easy-autocomplete').closest('.input-group').each(function(i, inputGroup) {
    $(inputGroup).removeClass('input-group');
    $autocomplete = $(inputGroup).find('.easy-autocomplete');
    $(inputGroup).find('.input-group-addon').prependTo($autocomplete);
    $autocomplete.addClass('input-group');
});

.easy-autocomplete-container {
    top: 100%;
}

<div class="form-group col-md-9">
    <label for="taskname">Task Name</label>
    
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-anchor"></i></span>
        <input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name">
    </div>

    <small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>

Based on your initial markup, I guess you are using Bootstrap 4 Beta 2. It is important to note that Beta 3 is available, and changes include the styling of the input group component too. So, with the most recent beta version the markup and the “reset” script would look like as below.

// Init `easyAutocomplete`
var tasknameoption = {
    adjustWidth: false,
    data: ["blue", "green", "pink", "red", "yellow"]
};
$("#taskname").easyAutocomplete(tasknameoption);

// Fixing markup
$('.easy-autocomplete').closest('.input-group').each(function(i, inputGroup) {
    $(inputGroup).removeClass('input-group');
    $autocomplete = $(inputGroup).find('.easy-autocomplete');
    $(inputGroup).find('.input-group-prepend').prependTo($autocomplete);
    $autocomplete.addClass('input-group');
});

.easy-autocomplete-container {
    top: 100%;
}

<div class="form-group col-md-9">
    <label for="taskname">Task Name</label>
    
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">
                <i class="fa fa-anchor"></i>
            </span>
        </div>

        <input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" aria-describedby="basic-addon1">
    </div>

    <small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>

Note: As you can see in the examples, it is still required to set adjustWidth: false for EasyAutocomplete options. Also, there is a fix for the class .easy-autocomplete-container to display properly.