Title: Split-button dropdown line wrap on screen resize and option selection
Tags: html;css;twitter-bootstrap;dropdown
Question: I am using split-button dropdowns, and I am wondering if there is way to stop the wrapping of the dropdown button?
Before, I had
<div class="btn-group btn-block"&gt; // btn-block
And the split button would wrap even when the screen was resized:
But I was able to find a fix for that (GitHub Issue Link)
<div class="btn-group" style="width:100px;"&gt; // Removed btn-block class, added style
But now if I select an option from the Dropdown, it becomes wrapped again, regardless of the screen size/column width (this issue was not there when I had the btn-block class as long as there was enough room in the column):
I would like the dropdown to not wrap regardless of the screen size or the option selected. Also, I do have the width of the columns set using col-md-*
Also, when a long option is selected, it starts to overlap into the next column:
I hope I have provided enough information to initiate meaningful responses.
JSFiddle Demo
<div class="col-lg-10" id="mapColumn"&gt;
<div&gt;
<table class="table table-condensed tablesaw tablesaw-stack table-striped-column" data-tablesaw-mode="stack" id="table2"&gt;
<thead&gt;
<tr&gt;
<th class="col-md-2"&gt;Map Actions</th&gt;
<th class="col-md-2"&gt;DB Actions</th&gt;
<th class="col-md-1"&gt;ID</th&gt;
<th class="col-md-3"&gt;Name</th&gt;
<th class="col-md-3"&gt;Features</th&gt;
<th class="col-md-1"&gt;Rating</th&gt;
</tr&gt;
</thead&gt;
<tbody&gt;
<tr&gt;
<td&gt;
<!-- <div class="btn-group btn-block"&gt; --&gt;
<div class="btn-group" style="width:100px;"&gt;
<button type="button" class="btn btn-sm btn-success"&gt;Actions</button&gt;
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
<span class="caret"&gt;</span&gt;
</button&gt;
<ul class="dropdown-menu" id="mapActions"&gt;
<li&gt;<a&gt;TOGGLE Map</a&gt;</li&gt;
<li&gt;<a&gt;ROTATE View</a&gt;</li&gt;
<li&gt;<a&gt;SAVE Pic to PC</a&gt;</li&gt;
</ul&gt;
</div&gt;
</td&gt;
<td&gt;
<!-- <div class="btn-group btn-block"&gt; --&gt;
<div class="btn-group" style="width:100px;"&gt;
<button type="button" class="btn btn-sm btn-success"&gt;Actions</button&gt;
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
<span class="caret"&gt;</span&gt;
</button&gt;
<ul class="dropdown-menu" id="dbActions"&gt;
<li&gt;<a&gt;UPDATE Features</a&gt;</li&gt;
<li&gt;<a&gt;SAVE POV to DB</a&gt;</li&gt;
</ul&gt;
</div&gt;
</td&gt;
<td&gt;123456</td&gt;
<td&gt;Street A &amp; Street B and a very very very long name</td&gt;
<td&gt;
<span class="label label-success"&gt;Label One</span&gt;
<span class="label label-success"&gt;Label Two</span&gt;
<span class="label label-success"&gt;Label Three</span&gt;
<span class="label label-success"&gt;Label Four</span&gt;
</td&gt;
<td&gt;★★★★★</td&gt;
</tr&gt;
</tbody&gt;
</table&gt;
</div&gt;
Comment: Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**.   Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem.

Comment: @Paulie_D Thanks for the info. I have added some html code. Should I add the css and JS in the question as well?

Here is the accepted answer: You can add these styles:
.btn-group {
white-space: nowrap;
font-size: 0;
.btn-group-vertical&gt;.btn, .btn-group&gt;.btn {
display:inline-block;
float:none;
Basically this makes the .btn elements inline, which in turn allows it to take advantage of nowrap white spacing.  I also had to set the button group to font-size:none to remove the spacing between the buttons, but Twitter Bootstrap sets a non-relative, pixel value for button font size, so setting font-size:0 on the .btn-group shouldn't be a problem.  I removed the floating from the .btns and, lastly, removed the fixed width of 100px in the markup.
https://jsfiddle.net/jmarikle/b4qtrfmb/
Alternatively, you should also be able to use display:flex
.btn-group, .btn-group-vertical {
display:flex;
.btn-group-vertical&gt;.btn, .btn-group&gt;.btn {
display:inline-flex;
float:none;
https://jsfiddle.net/jmarikle/b4qtrfmb/1/
Comment for this answer: Thanks Joseph! It is working on the JSFiddle, I will try it on my actual code and report back later today.
Comment for this answer: Sorry for the delay. I think it is working. I'll accept the answer and comment back if I have any issues later on. Thanks again!
Comment for this answer: @Ali Cool.  I anticipate checking back here every now and again over the next 5 hours or so.  Otherwise I can jump on late tonight and answer any question you may have asked in my absence.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:02/25/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><twitter-bootstrap><dropdown>', 'Title': 'Split-button dropdown line wrap on screen resize and option selection', 'ViewCount': 1704, 'id': 35633580, 'user_AboutMe': None, 'user_AccountId': 5936957.0, 'user_DisplayName': 'Ali', 'user_Reputation': 558.0, 'user_Views': 64.0, 'user_id': 4669619.0}}