Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

.form-inline with .input-group has wrong positioning when flexbox is enabled

Created by: wojtask9

sample code

<body>
  <form class="form-inline">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username">
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
            Action
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
          </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
      </div>
      <button type="submit" class="btn btn-primary">Send invitation</button>
    </div>
  </form>
</body>

screenshoot

form-inline-input-group

If flex is disabled everything looks correct.