Bootstrap: Split dropdown button width in .btn-group-vertical broken

[karloffenberger]

Having .btn-group buttons (e.g. single button dropdowns and split button dropdowns) inside a .btn-group-vertical group renders incorrectly in several ways (tested on Win7 IE 10.0.9, FF 24.0 and Chrome 31).

1. .btn-group widths aren't inherited from widest sibling button within .btn-group-vertical.
2. Split button groups show empty margins between each .btn.
3. The first .btn of a btn-group which is the first child of a .btn-group-vertical incorrectly has a border-bottom-left-radius.
4. The last .btn of a btn-group which is the last child of a .btn-group-vertical incorrectly has a border-top-right-radius.

See this JsFiddle to visualize said errors.

[karloffenberger]

I've been trying to fix these issues by having .btn-group nested within a .btn-group-vertical as display: table and their child .btn elements as display: table-cell with a few touch-ups for widths. Sorting out border radii is just a matter of proper selectors to fix the culprits.

ISSUES with below proposal

1. I might add that display: table-cell will only work on <a> buttons as some browsers treat <button> as a replaced element - see this SO question's accepted answer for more details on this issue.
2. If the dropdown button is the only child of the .btn-group-vertical, border rounding is broken. Need better selectors to handle this edge case. Fixed below. See: Fix for only child of .btn-group-vertical rounded borders.
3. The > .btn + .btn { border-left: none; } rule below was introduced to compensate double button borders. However, this now incorrectly does not show the border-left highlight on :hover state. This could be compensated by using :after pseudo elements on .btn:hover with absolute positioning, however, FF has issues (probably a FF bug) with absolutely positioned pseudo elements in table-cell display.
4. Chrome 31 on Win7 still has an issue when .btn-group dropdowns are in .open state. The .btn elements with no set width (e.g. all but .dropdown-toggle when using my LESS fix) change their computed width property in .open state. No clue why?

Here's the LESS:

/* Button groups in a vertical layout require table layout and
 * some border and width touch-ups to show correctly.
 */
.btn-group-vertical > .btn-group {
  display: table;
  border-collapse: separate;

  /* Webkit & IE strangely have pseudo elements of 1px width
   * adorned to the .btn-group. This hides them and fixes the
   * .btn-group width.
   */
  &:before, &:after { display: none; }

  /* Children of the .btn-group are treated as table cells.
   */
  .btn { display: table-cell; }

  /* No border-bottom-radius of the .btn-group is the first
   * child of a .btn-group-vertical parent.
   */
  &:first-child > .btn { .border-bottom-radius(0); }

  /* No border-top-radius of the btn-group is the last
   * child of a btn-group-vertical parent.
   */
  &:last-child > .btn { .border-top-radius(0); }

  /* Fix for only child of .btn-group-vertical rounded borders.
   */
  &:first-child:last-child {
    > .btn:first-child { .border-left-radius(@border-radius-base); }   // apply left border radius to first .btn
    > .btn:last-of-type { .border-right-radius(@border-radius-base); } // apply right border radius to last .btn
  }

  /* No border-left if the .btn is has adjacent sibling .btn.
   */
  > .btn + .btn { border-left: none; }

  /* Inherit the width of the parent .btn-group-vertical if
   * the .btn-group is a single button dropdown.
   */
  .btn.dropdown-toggle:first-child { width: inherit; }

  /* The .dropdown-toggle button would appear too wide in
   * table layout so the width is set to 1px and inherited
   * padding, margins and toggle icon take care of the rest.
   */
  .btn.dropdown-toggle { width: 1px; }
}

The resulting JsFiddle shows the partially fixed .btn-group-vertical.

[RobJacobs]

I've noticed the same issues.

[karloffenberger]

I have played around extensively with various fixes for the .btn-group-vertical with single button and split button dropdowns, only to come to the rather discouraging conclusion that I don't believe there is an elegant, straightforward solution. The use of table and table-cell display for dropdowns introduces new limitations requiring workarounds and unsupported styling features.

I might try to re-work .btn-group and .btn-group-vertical in to list containers much like the Foundation 4 guys are doing. I anyway think having groups of buttons as list items would be semantically more appropriate and could possibly ease up on some of the styling issues.

Thoughts?

[RobJacobs]

My quick fix although not ideal:

        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">Button Long Long Long</button>
            <div class="btn-group" >
                <button type="button" style="width: 100%; padding-right: 8px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Button
                    <span class="caret pull-right" style="margin-top: 10px;"></span>
                </button>
                <ul class="dropdown-menu" role="menu" >
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" style="width: 100%; margin-right: 28px; padding-right: 20px;">Button</button>
                <button type="button" class="btn btn-default dropdown-toggle" style="position: absolute; right: 0; top: 0; z-index: 999;" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>

[mdo]

We'll have to tag this as v3.1 since it's technically adding a new feature—we don't currently support nested button groups in vertical button groups. The markup and CSS are super tough as this thread shows, so for the time being I'm going to push it off and prioritize other things.

[RobJacobs]

@mdo That's fine. The documentation for button group - vertical variation included dropdown buttons (which are a button group) so I was expecting that to be supported.

[mdo]

Ah, I should clarify @RobJacobs—we don't support the _split_ nested button groups at this time, so this would be a new feature.

[karloffenberger]

@mdo Cool with me. I actually only got this issue because I was doing up a master component template with all the Bootstrap stuff on one page in all sorts of crazy configurations and constellations.

Still think it'd be way easier to structure button groups as lists. Here's my first crack at it JsFiddle. Has some border issues I didn't bother with as I had to move on, but it's a solid base I think. Thoughts?

[mdo]

Making a personal note that this isn't #11493, and renaming issue to include "Split" in the title.

[RobJacobs]

I was able to fix this against the 3.0.3 release using the flex box layout:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Button Long Long Long</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Button
            <span class="caret" ></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
    <div class="btn-group" style="display: flex;">
        <button type="button" class="btn btn-default" style="flex: 1 0 auto; order: 1; width: auto; min-width: 0;">Button</button>
        <button type="button" class="btn btn-default dropdown-toggle" style="flex: 0 1 auto; order: 2; width: auto; min-width: 0;" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
</div>

[karloffenberger]

@RobJacobs how is that going to fix the issue on IE8 and IE9 which do not support the flexbox layout model? I'd still prefer a more "generic" solution moving towards 3.1.

[mdo]

I'm going to punt on this—the extra CSS is just way too much overhead. I also struggle to see a great implemenation of these kind of button groups where you could have regular buttons, split button dropdowns, and button dropdowns.

[jspenc72]

Any chance of supporting this sort of nested split buttons in the next release. I have need of this feature.

[shanavas786]

+1 for split button dropdown in vertical button group