Dropdown Input Group Issue

[seanbotha123]

Hi guys.

Looks like there is an issue when adding a dropdown button to an input group, and not having the dropdown as the last element, the border-radius' are not correct:

Please see fiddle for reproduction: http://jsfiddle.net/nxqdgkas/6/

• Operating system and version: Ubuntu 18.04.1 LTS
• Browser and version: Chrome 70.0.3538.77

Thanks!

[ysds]

If you want to use a dropdown on the button that isn't at the last element of the input group, you can do it by using multiple .input-group-appends. I mentioned about this usage in #25075, but it isn't described in the documents.

Demo: https://codepen.io/anon/pen/wNJWeL

Why need multiple .input-group-append? A .dropdown-menu must be the last child of the wrapper (.dropdown, .btn-group or an element has position: relative). This mean the following code is incorrect:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
    <!-- dropdown-menu must be at the last of the container. -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

So, you should use multiple .input-group-appends:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

[MartijnCuppens]

@seanbotha123,

You could indeed go for the approach suggested by @ysds.

[XhmikosR]

@ysds maybe we should add this to the docs on master/v4-dev?

[ysds]

yep it is better for v4. But no need for v5 because #29885 made allow multiple dropdown menus in a single parent.