Closed vortex-5 closed 7 years ago
I've looked into this "bug" and realised, it's no bug.
Bootstrap just doesn't support fully responsive btn-groups . Bootstrap Issue #7252
We could manipulate the bootstrap or use some extra class as I did in #49.
Also, we could use vertical groups, but it would duplicate allot of content. Little example for the first buttongroup
<div class="btn-group hidden-xs">
<label class="btn btn-default" ng-model="displayDensity" btn-radio="'Normal'">Normal</label>
<label class="btn btn-default" ng-model="displayDensity" btn-radio="'Compact'">Compact</label>
</div>
<div class="btn-group-vertical visible-xs">
<label class="btn btn-default" ng-model="displayDensity" btn-radio="'Normal'">Normal</label>
<label class="btn btn-default" ng-model="displayDensity" btn-radio="'Compact'">Compact</label>
</div>
made a copy&paste mistake in the gif - sorry
I was just going to change the row to not use bootstrap alignment
I.E. I was going to change the row to
<div style="display: flex; flex-wrap: wrap">
<item>...
<item>...
</div>
then fiddle around with it. I wouldn't have to use @media queries.
I use flex at work a lot to compensate when stability is more important vs aesthetics.
(Of course I would put this in proper css classes I just did it inline here for readability)
Anyways your solution is better I just need to test it on my 5 year old android phone with the smallest screen and we'll go with that solution since it's more aesthetically pleasing anyways.
Added some wrapping the whole thing is pretty slick now new version will be drafted.
Another user contributed a dark theme.
The only minor problem is on mobile (responsive design) the buttons don't look quite right.
We need to add some wrapping to the layout so the buttons look right.