Menu icon Foundation
Nested button groups and dropdowns

I am attempting to achieve a nested button group almost identical to the example here for Bootstrap http://getbootstrap.com/components/#btn-groups-nested

I am attempting to have a radius button group with the last button being a dropdown button. I can achieve this, however the dropdown button does not retain the styling from the radius class assigned to the button group. What I end up with is a sharp corner on the last button not a radius. I attempted to nest the button group as shown in Bootstrap but this broke the button group all together. Can this be achieved w/o custom css? Thanks!

2015 03 16 at 1.37 pm

<!-- Right Content Column -->
  <div class="large-9 columns">
    <div class="issue-content">
      <span><i class="fa fa-globe fa-3x"></i>
        <a href="#">Project Name</a> / <a href="#">Issue Id</a>
        <h3>Issue Title Clash with Structure and Terminal Equipment</h3>
      </span>
    </div>
    <div class="button-bar command-bar">
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary"><i class="fa fa-pencil fa-lg"></i></a></li>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary"><i class="fa fa-comment-o fa-lg"></i></a></li>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary">Assign</a></li>
        <li><a href="#" data-dropdown="drop-more" aria-controls="drop-more" aria-expanded="false" class="tiny button secondary dropdown">More</a></li>
        <ul id="drop-more" data-dropdown-content class="f-dropdown" aria-hidden="true">
          <li><a href="#">Log Work</a></li>
          <li><hr></li>
          <li><a href="#">Attach Files</a></li>
          <li><a href="#">Attach Screenshot</a></li>
          <li><hr></li>
          <li><a href="#">Move</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Clone</a></li>
        </ul>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary">Unresolved</a></li>
        <li><a href="#" class="tiny button secondary">Closed</a></li>
        <li><a href="#" class="tiny button secondary">Implemented</a></li>
      </ul>
      <ul class="button-group radius right">
        <li><a href="#" data-dropdown="drop-export" aria-controls="drop-export" aria-expanded="false" class="tiny button secondary dropdown">Export</a></li>
        <ul id="drop-export" data-dropdown-content class="f-dropdown" aria-hidden="true">
          <li><a href="#">XML</a></li>
          <li><a href="#">Word</a></li>
          <li><a href="#">Printable</a></li>
      </ul>
    </div>
  </div>
</div>

            

         

dropdownbuttonbutton group

I am attempting to achieve a nested button group almost identical to the example here for Bootstrap http://getbootstrap.com/components/#btn-groups-nested

I am attempting to have a radius button group with the last button being a dropdown button. I can achieve this, however the dropdown button does not retain the styling from the radius class assigned to the button group. What I end up with is a sharp corner on the last button not a radius. I attempted to nest the button group as shown in Bootstrap but this broke the button group all together. Can this be achieved w/o custom css? Thanks!

2015 03 16 at 1.37 pm

<!-- Right Content Column -->
  <div class="large-9 columns">
    <div class="issue-content">
      <span><i class="fa fa-globe fa-3x"></i>
        <a href="#">Project Name</a> / <a href="#">Issue Id</a>
        <h3>Issue Title Clash with Structure and Terminal Equipment</h3>
      </span>
    </div>
    <div class="button-bar command-bar">
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary"><i class="fa fa-pencil fa-lg"></i></a></li>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary"><i class="fa fa-comment-o fa-lg"></i></a></li>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary">Assign</a></li>
        <li><a href="#" data-dropdown="drop-more" aria-controls="drop-more" aria-expanded="false" class="tiny button secondary dropdown">More</a></li>
        <ul id="drop-more" data-dropdown-content class="f-dropdown" aria-hidden="true">
          <li><a href="#">Log Work</a></li>
          <li><hr></li>
          <li><a href="#">Attach Files</a></li>
          <li><a href="#">Attach Screenshot</a></li>
          <li><hr></li>
          <li><a href="#">Move</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Clone</a></li>
        </ul>
      </ul>
      <ul class="button-group radius">
        <li><a href="#" class="tiny button secondary">Unresolved</a></li>
        <li><a href="#" class="tiny button secondary">Closed</a></li>
        <li><a href="#" class="tiny button secondary">Implemented</a></li>
      </ul>
      <ul class="button-group radius right">
        <li><a href="#" data-dropdown="drop-export" aria-controls="drop-export" aria-expanded="false" class="tiny button secondary dropdown">Export</a></li>
        <ul id="drop-export" data-dropdown-content class="f-dropdown" aria-hidden="true">
          <li><a href="#">XML</a></li>
          <li><a href="#">Word</a></li>
          <li><a href="#">Printable</a></li>
      </ul>
    </div>
  </div>
</div>

            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Seems to work fine here: http://codepen.io/rafibomb/pen/EqCdJ

Tried it with radius and round.

Also button-bar http://codepen.io/rafibomb/pen/EqCdJ

Alan Jackson over 4 years ago

Thanks Rafi. I moved the ul's out of the list and that seems to have fixed. Really appreciate the help, thanks!