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;
}

This works pretty well as seen here (jsfiddle). However by adding a twitter-bootstrap button group to a cell that should fit the width to its content the buttons will wrap down between them still. jsfiddle.

How can I prevent my buttons to get wrapped down? I still want to keep them in one line.

EDIT I want to keep the table width 100%, so removing 1% width of the cell is not a solution. Also removing the float from bootstrap's .btn-group > .btn will bring space between my buttons as long as there is space between the label tags, even unwanted but acceptable.

Answer 1

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.

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

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.