Within my button group, there are 10 buttons. On certain screen widths, using media queries for responsiveness, I hide some buttons.
The issue arises when the last button is hidden - the rounded edges of the succeeding visible button are not maintained.
This problem may be hard to convey in words, but it's easily demonstrated in a Fiddle.
My query pertains to implementing rounded corners on the last visible button within the group rather than exclusively on the very last button.
Below is sample code from the Fiddle, as per Stack Overflow guidelines:
<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 'fifth' in the second button set.
I could resort to JavaScript and assign a new class to the last visible element, but I prefer a CSS-only solution if feasible.