CODEWITHSUNDEEP
angularvmware-clarity
MehmedB
MehmedB

Reputation: 1147

How to add selectAll/deselectAll buttons on top of clrCheckbox?

First of all I am neither a front end dev. nor have experience in javascript/html/angular etc. This question might be easy to solve but I couldn't find a proper/working solution because I don't know the problem. I am trying to add already working "Select All" and "Deselect All" buttons on top of checkboxes. But for some reason they either doesn't show up or they are displayed at the bottom, right next to already existing, same buttons. Can someone tell me what am I doing wrong here?

<div class="widget form-group">

    <clr-checkbox-container>
        <label>
            {{schema.title}}
        </label>
        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>
        <clr-checkbox-wrapper *ngFor="let option of schema.items.oneOf"  class="checkbox">

            <input clrCheckbox [attr.name]="name"
                   value="{{option.enum[0]}}" type="checkbox"
                   [attr.disabled]="schema.readOnly"
                   (change)="onCheck($event.target)"
                   [checked]="checked[option.enum[0]] ? true : null"/>
            <label>{{option.description}}</label>
        </clr-checkbox-wrapper>
        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>

    </clr-checkbox-container>
</div>

I have tried to copy/paste this part to different places like monkey and ofc. it didn't work out well.

        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>

Upvotes: 0

Views: 306

Answers (1)

The Fabio
The Fabio

Reputation: 6250

After a look on the docs for these checkbox containers, it seems your usage of the clr-control-helper directive is incorrect. This directive seems to be a placeholder for some text below the checkboxes, and there probably is some "css/js magic" going on on it.

I would recommend you insert a new div above the clr-checkbox-container, something like this:

<div class="widget form-group">
    <div class="your-css-for-positioning">
     <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
     <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
    </div>
    <clr-checkbox-container>
        <label>
    ...

Upvotes: 1

Related Questions