Bootstrap: Button group with outlined buttons & dropdown does not round if dropdown is last

Created on 8 Sep 2017  路  9Comments  路  Source: twbs/bootstrap

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <a class="btn btn-outline-secondary" href="#" role="button" data-toggle="tooltip" title="Hide avatars"><i class="fa fa-eye-slash"></i></a>

  <div class="btn-group" role="group">
    <button class="btn btn-outline-secondary" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Mod tools"><i class="fa fa-cog"></i></button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">Edit</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#" data-toggle="modal" data-target="#mdlRemoveFeedItem">Remove</a>
    </div>
  </div>
</div>
css v4

Most helpful comment

Found it ! #22926
Thanks @Johann-S 馃槃

All 9 comments

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin or CodePen and report back with your link, Bootstrap version, and specific browser and OS details.

Pen
Bootstrap: v4.0.0-beta
Browser: Chrome v61, Yandex browser v17.7.1.791 + all chrome-like, Firefox 55.0.3
OS: Windows 10 v1703 (build 15063.540)

Hi @aolko you are missing the class .dropdown-toggle on class="btn btn-outline-secondary dropdown-toggle"

IMO the dropmenu doesn't get the border radius if the class .dropdown-toggle is not present.

But I am unsure, if .dropdown-toggle is mandatory then we can close this issue, on the other hand if we want drop menus to get rounded corners regardless of the generated caret, then this should be labeled as a bug (and a very tricky one to fix 馃槤 )

I'll let other people comment before I dig into this one.

it is mandatory, but then what if i don't want :after arrow at all?

@aolko that's my point :) I though we should make the caret optional.

fixed the pen, and please make the caret optional

they are a PR for that @aolko (make the caret optional)

Found it ! #22926
Thanks @Johann-S 馃槃

22926 was merged, so closing.

Was this page helpful?
0 / 5 - 0 ratings