CODEWITHSUNDEEP
cssangular
Hamza Haddad
Hamza Haddad

Reputation: 1556

Can't click on button when float right

I have created a form that adds input dynamically with an add and remove button. I would place them on the right

I can't click on remove button exept the lastet one

here an exemple

HTML file:

    <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Constituez votre équipe</ng-template>
        <div formArrayName="pers" *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
            <mat-form-field>
                <input matInput placeholder="Nom collaborateur #{{i+1}}" [formControl]="control.controls.name" required>
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Poste" [formControl]="control.controls.poste" required>
            </mat-form-field>
            <button *ngIf="secondFormGroup.controls.pers.controls.length > 1" (click)="deleteItem()" mat-mini-fab color="warn" class="rightButton"><mat-icon >remove</mat-icon>
                </button>
        </div>
        <div>{{secondFormGroup.value | json}}</div>


        <button (click)="addItem()" mat-mini-fab color="primary" class="rightButton"><mat-icon >add</mat-icon>
              </button>
    </form>
</mat-step>

CSS file :

.rightButton {
    position: relative;
    float: right;
}

When I disable rightButton class on the remove button , I could click on all of the buttons without a problem but they are not right positioned as I want.

Upvotes: 12

Views: 8936

Answers (2)

Tibs
Tibs

Reputation: 765

Try this

.rightButton {
    position: relative;
    z-index: 99;
    float: right;
}

This will make the button to be on top of all the HTML elements on the form. The z-index property only works on positioned elements (absolute, relative, fixed, and sticky)

Upvotes: 24

Srihari Karanth
Srihari Karanth

Reputation: 2167

For me z-index didnt work.

There was something in front of that button that is not visible. Making the button as a separate row helped.

In Bootstrap 4 this is how I made it a separate row:

<div class="row block-section">
   <a data-placement="top" class="btn btn-sm btn-danger"
     href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>

Then it started working on mobile device even with

float: right

Upvotes: 0

Related Questions