Bootstrap 3 is unable to unmark the justified dropdown button group for the inactive options

Question

With Bootstrap 3.3.7, I am trying to have a justified navigation dropdown button group, to mark correctly, after selection. I am having the problem of both menu options being marked, in the dropdown button, when one after another options being selected. Are there anyways to have the dropdown menu to mark only the option being selected, while being a justified group dropdown navigation button? Thank you!

sample code

<div class="row">
<div class="col-md-7">
    <div class="btn-group btn-group-justified" role="group">
        <a href="#left" class="btn btn-primary" role="button" data-toggle="tab">Left</a>
        <a href="#middle" class="btn btn-primary" role="button" data-toggle="tab">Middle</a>
        <div class="btn-group" role="group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
            <ul class="dropdown-menu">
                <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
        <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
    </div>
</div>

score 0 · Accepted Answer · answered Jun 22 '17 at 05:49

0

Instead of using button groups I'd recommend using the Nav component instead styled with the pills modifier class. It's not the same but very close and the Tab panels are built to work with the pills styling.

It will solve the problem you have now with the active class remaining on the dropdown options.

<div>
  <ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
      <ul class="dropdown-menu">
        <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
        <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li>
      </ul>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings</div>
  </div>
</div>

https://codepen.io/partypete25/pen/Moooaq?editors=1100

answered Jun 22 '17 at 05:49

partypete25

4,353
1
17
16

I figured that part, but the problem is that it has to be the button group style, or looked like it. The buttons need to appear as a group buttons instead of individual buttons. If you look in details, they looked different. Just trying to have it looked like button group and working like nav component. Thanks for trying. – xam Jun 22 '17 at 16:07
I've applied the button styles to my nav-pill buttons. First add class="btn btn-default" to the tab links and then update the css to overwrite the current nav-pill appearance to match that of buttons in a button group. take a look at the codepen now. – partypete25 Jun 23 '17 at 04:32
That's very nice, and very close to what I need. I noticed something. When I resize the screen, or narrowing my browser window. The button would stacks and the buttons looked funny when that happens. Are there anyways to apply vertical button group style while being stacked or making it not to be stacked at all? The button group doesn't stack even we narrow the browser as if it is displaying on mobile device. I don't mind they stacks, but the group style looked wired when stacked. thank you so much! – xam Jun 23 '17 at 19:15
Ok try now. I've just wrapped the css that changes the border-radius into a media query from ipad size (768px) upwards. – partypete25 Jun 24 '17 at 07:55
Thank you @partypete25! I accepted your answer, and posted a customized of your answer, for my need, thanks again! – xam Jun 26 '17 at 20:35

score 0 · Answer 2 · answered Jun 26 '17 at 20:34

I tailored @partypete25 answers, to my needs. Thanks again @partypete25!

sample code

<style>
    .nav.nav-pills.nav-justified.nav-group > li:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
        margin-bottom: 0;
    }

    @media(max-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;

        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group li + li {
            margin-left: 0;
        }
    }
    @media(min-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
</style>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills nav-justified nav-group">
            <li class="active"><a href="#left" class="btn btn-primary" role="tab" data-toggle="tab">Left</a></li>
            <li><a href="#middle" class="btn btn-primary" role="tab" data-toggle="tab">Middle</a></li>
            <li class="dropdown">
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
                <ul class="dropdown-menu">
                    <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                    <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
                </ul>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
            <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
        </div>
    </div>
</div>

Bootstrap 3 is unable to unmark the justified dropdown button group for the inactive options

2 Answers2