How to ignore hidden items in Button Bootstrap group?

Question

I have a button group containing 10 buttons. At certain screen widths (responsive), I hide some of these media buttons.

The problem is that if I hide the last button, the new last edges of the buttons will not be rounded.

This is a tricky issue to describe, but very easy to show in Fiddle .

My question is: how to add rounded corners to the last visible button in a button group, and not just the last button, as it is now.

The code from the script below, according to the SO rules:

<div class="btn-group" id="sortBtns" role="group"> <button type="button" class="btn btn-default">First</button> <button type="button" class="btn btn-default">Second</button> <button type="button" class="btn btn-default">Third</button> <button type="button" class="btn btn-default">Fourth</button> <button type="button" class="btn btn-default">Fifth</button> <button type="button" class="btn btn-default">Sixth</button> </div> <div class="btn-group" id="sortBtns" role="group"> <button type="button" class="btn btn-default">First</button> <button type="button" class="btn btn-default">Second</button> <button type="button" class="btn btn-default">Third</button> <button type="button" class="btn btn-default">Fourth</button> <button type="button" class="btn btn-default">Fifth</button> <button type="button" class="btn btn-default" style="display:none;">Sixth</button> </div> 

Note the absence of rounded corners on the “fifth” in the second group of buttons.

I can do this using JavaScript by adding a new class to the last visible element, but I would prefer. Is there a cleaner solution just for CSS?

Answer 1

If you don't mind adding a dependency, I recommend AngularJS ' ng-if . This is useful when using css selectors that rely on the position of an element in the DOM, such as: first-child or: last-child pseudo-layers . It will remove the element from the DOM and allow you to achieve your goal.

Answer 2

One option is to simply duplicate the code and add the hidden-xs class to the first block of code and visible-xs to another block of code.

Like this:

 <div class="btn-group hidden-xs" id="sortBtns" role="group"> <button type="button" class="btn btn-default">First</button> <button type="button" class="btn btn-default">Second</button> <button type="button" class="btn btn-default">Third</button> <button type="button" class="btn btn-default">Fourth</button> <button type="button" class="btn btn-default">Fifth</button> <button type="button" class="btn btn-default">Sixth</button> </div> <div class="btn-group visible-xs" id="sortBtns2" role="group"> <button type="button" class="btn btn-default">First</button> <button type="button" class="btn btn-default">Fifth</button> <button type="button" class="btn btn-default">Sixth</button> </div> 

Another option is to apply the css rule to the edgy element:

  .edgy-right-element { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } 

Answer 3

Here is a solution using jQuery:

 $('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0); $('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({ 'border-top-left-radius': '3px', 'border-bottom-left-radius': '3px', }); $('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({ 'border-top-right-radius': '3px', 'border-bottom-right-radius': '3px', }); 

For each group of buttons with hidden buttons, this will remove the border radii for all buttons inside, and then add inverse radii for the first and last visible buttons.

OP Fiddle with solution