Html / AngularJs - Make buttons full width

Question

i'm using angularJs to develop an app and I have to create some buttons, here is how I create them :

<div class="btn-group-view col-md-12 col-sm-12" role="group" aria-label="Basic example">

    <button class="btn btn-selection col-md-4 col-sm-4" ng-click="selectView('raw'); selectTab('raw');" ng-class="{'active':selectedTab === 'raw'}">Raw data</button>
    <button class="btn btn-selection col-md-4 col-sm-4" ng-click="selectView('summary'); selectTab('summary');" ng-class="{'active':selectedTab === 'summary'}">Summary</button>

    <button class="btn btn-selection col-md-4 col-sm-4" ng-repeat="(key, value) in views" ng-click="selectView(key); selectTab(key);" ng-class="{'active':selectedTab === key}">
        {{ key }}
    </button>
</div>

So my container is col-md-12 and buttons are col-md-4, they can be 3 on each line.

The thing I want to do is for example if there is 4 button, the last one take the full width of his row, if there is 5 buttons, the two last one take 50% and 50% of the width.

I don't find how to do this, I think it can be done with an if statement on the html template to check the number of buttons but I don't know how to do this in AngularJs.

use the col-md-? in ng-class corresponding to the number of buttons ? — Groben
– Groben, Commented Oct 2, 2018 at 8:44
That's what I want to do but for example if I have 8 buttons I have to put col-md-6 only for the two last ones, and I don't find the way to do this — Spialdor
– Spialdor, Commented Oct 2, 2018 at 8:47

Groben · Accepted Answer · 2018-10-02 08:59:14Z

1

You could create a function that calculates the number of buttons, it implies that you know the number of buttons and their positions:

function getButtonClass(indexOfButton ) {
    if(numberOfButtons % 3 === 2 && (indexOfButton ===  numberOfButtons || indexOfButton ===  numberOfButtons - 1)){
        return 'col-md-6';
    }
    if(numberOfButtons % 3 === 1 && (indexOfButton ===  numberOfButtons)){
        return 'col-md-12';
    }
    return 'col-md-4';
}

The function calculates the modulo, if it's 2, it's means there will be 2 elements in your last line, if it's 1, there will be one element, etc. The index is used so only the last line is impacted.

Once you have binded to the scope (or the controller if you use controller syntax) you could call it like that:

 <button class="btn btn-selection" ng-class="getButtonClass(indexOfButton)">

This is only a partial answer since I don't have all the elements to give you a more complete one. This is to give you an idea of how you could do it.

answered Oct 2, 2018 at 8:59

Groben

1,3862 gold badges10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spialdor Over a year ago

Thanks, do you know how can I combine this ng-class with mine who put an active class if a variable is true : ng-class="{'active':(selectedTab === key)}", I try ng-class="{'active':(selectedTab === key), getButtonClass($index)}" but doesn't work :/

Groben Over a year ago

Depends, if you have the information about selectedTab and key in your controller you can edit the function to return the class + 'active'

Spialdor Over a year ago

Thanks for all, I add the active class in the function and all works fine ^^

Collectives™ on Stack Overflow

Html / AngularJs - Make buttons full width

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related