Bootstrap CSS input group not working expected with Angular Material Autocomplete component

Question

I am trying to create something like this with Angular Material Autocomplete component:

And this is the html code for making this.

  <div class="md-form input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">http://</span>
      <input type="text" class="form-control" placeholder="Username" 
      aria-describedby="basic-addon1">
      <span class = "input-group-btn">
        <button class="btn btn-primary" >Calculate</button>
      </span>
  </div>

But with autocomplete component, I get this:

And this is the code:

  <div class="input-group input-group-lg">
    
    <span class = "input-group-addon">http://</span>

    <!--<label class="center-block">Country:-->
    <md-input-container>
      <input mdInput placeholder="Type Domain Name..." [mdAutocomplete]="auto" 
      class="form-control validate filter-input " 
      formControlName="siteURLInput">
    </md-input-container>
    <md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" 
    required md-input-minlength="2" md-input-maxlength="50"
      md-select-on-match [displayWith]="displayFn">
      <!-- [displayWith]="displayFn" -->
      <md-option *ngFor="let site of sites | async" [value]="site">
        {{ site.SiteUrlShort }}
      </md-option>
    </md-autocomplete>
    <!--</label>-->
    
    <span class = "input-group-btn">
    <button (click)='LoadSiteInfo(searchForm)' class="btn btn-primary" 
    [disabled]="!searchForm.valid">Calculate</button>
    </span>
  </div>

So there are 2 problems with this code; component length and span height. Any idea would be appreciated much.

Answer 1

You are trying to combine bootstrap style with material by using md-input-container and mdInput inside it. If you keep the input div pure bootstrap and just add md-autocomplete to it, that should work.

sample html:

<div class="md-form input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">http://</span>

      <input type="text" class="form-control" placeholder="Type Domain Name" 
      aria-describedby="basic-addon1"
      [mdAutocomplete]="auto" [formControl]="stateCtrl">

      <span class = "input-group-btn">
        <button class="btn btn-primary" >Calculate</button>
      </span>
</div>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

demo