Suppress button wrap in button group after fitting cell width dynamically

Question

According to MetalFrog\'s answer to this problem I\'m trying to fit a cell width to its content:

tr td.fit {
width: 1%;
white-space: nowrap;
}

Answer 1

If you remove the float property they are horizontally aligned. It happens that setting a width of 1% on the table cell is not enough room for the floated elements. If you would increase to let' say fifty percent they would align horizontally.
See here test with td of 50%: http://jsfiddle.net/7zcHW/1/show

.btn-group > .btn, .btn-group-vertical > .btn {
    float: left;
    position: relative;
}

Two options:

1. Remove the floated property on .btn
2. Or increase table cell width td.fit / set width to auto / remove the width.

Answer 2

REVISED ANSWER:

The inline-block solution is kind of gross -- restoring the font-size is dodgy b/c you can't say "inherit from two levels up", you have to explicitly set it.

Today I would use flexbox, which would enable eliminating the empty space between items:

.btn-group {display: flex;}

...as another user answered. To elaborate: using display: flex works b/c the default values for flex-related properties flex-direction (default "row" means horizontal flow), justify-content (default "flex-start" means items are packed toward the beginning of the row), and flex-wrap (default "nowrap") fulfill the use case.

---

OLD ANSWER:

Use display: inline-block on the buttons. A side effect of this is that ANY whitespace between in the markup will render as visible space between the buttons, so you have to do this little trick with font-size:

.btn-group {
  white-space: nowrap; 
  font-size: 0; // inline-block will show ALL whitespace between elements, so shrink it!
}

.btn-group .btn {
  display: inline-block;
  font-size: 14px; // restore font-size to whatever you are using for button text.
  float: none;
  clear: none;
}

Note that this does not work with IE7 and older. Support is pretty good otherwise: http://caniuse.com/#search=inline-block

Also, to be responsive to varying device form factors, you might want to come up with an alternate component that just wraps more elegantly than .btn-group .

Answer 3

I know this may be old but here is the solution I came to.

I added the btn-group-justified class and a set width to the btn-group-DIV. I just set the width as wide as I needed for both buttons to fit their content.

<td class="fit"  >
    <div class="btn-group btn-group-justified" style="width:136px">
         <a href="#" class="btn btn-second">Accept</a>
         <a href="#" class="btn btn-highlight">Deny</a>
    </div>
</td>

If your buttons are created statically this will work fine but if they are being generated dynamically you could use javascript to set the width of the btn-group to either the sum of the width of the children, or by multiplying the largest button width by the number of children.

Answer 4

Adding this css decleration will fix any issues with table cells wrapping button groups.

.btn-group {
  display: flex;
}

Explanation: This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. By default, flex items will all try to fit onto one line.