8

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.

Community
  • 1
  • 1
Martin Braun
  • 10,906
  • 9
  • 64
  • 105

4 Answers4

24

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.

eteich
  • 527
  • 4
  • 13
  • Please use the [edit] link explain how this code works and don't just give the code, as an explanation is more likely to help future readers. – Jed Fox Dec 09 '16 at 13:23
  • I thought it was pretty self explanatory conisedring it's css and deals with the class being asked about.. This fixes it completely one shot. I added an explanation. This is the simplest most elegant answer. Please remove your down vote. – eteich Dec 10 '16 at 02:29
  • It would be great if you could add an explanation of **why** `display:flex;` helps, as it’s not quite clear why it fixes things. – Jed Fox Dec 10 '16 at 11:50
  • 1
    This works, In my case I had to add it to my `.btn-toolbar` to prevent wrapping between `.btn-group` elements – David R. Jun 09 '17 at 02:39
  • I re-visit my old question. You added the flex solution as first and since flex is now supported very well, I changed the accepted answer to yours. – Martin Braun Apr 10 '18 at 15:27
  • Just FYI, this breaks `.btn-group-justified` – Antoine Apr 08 '20 at 16:18
8

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 .

michai
  • 460
  • 5
  • 8
1

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.

Natalie Hedström
  • 2,607
  • 3
  • 25
  • 36
Skbenga
  • 105
  • 1
  • 7
0

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.
JohanVdR
  • 2,880
  • 1
  • 15
  • 16
  • Thx this works. http://jsfiddle.net/wexdX/330/ However, when adding a space between the label tags it will not look right. This might was the reason why they started to float it. BTW, the reason why this works is because elements that are floated to a direction will wrap down when the width is not high enough. – Martin Braun Apr 20 '14 at 22:08
  • I suggest to go for option (2). There is no reason to set a width of 1% in that case. BTW white-space: nowrap and floats do not work together. And I would not mess with the bootstrap CSS in this case. – JohanVdR Apr 20 '14 at 22:14
  • Forgot to mention that my table is 100% width, so removing the width is out of context, since it will produce this side effect I want to avoid: http://jsfiddle.net/wexdX/332/ – Martin Braun Apr 20 '14 at 22:29
  • 1
    Than remove the float, it will use display: inline-block than. – JohanVdR Apr 20 '14 at 22:36
  • Your answer is confusing. Instead of giving the solution code and talking about the solution you give the problem code and talk about how to reverse the problem. instead of `true` you're `false(false)`. – toddmo Sep 05 '16 at 16:15