Topic: Fixed action button making other inputs and buttons inaccessable
**Expected behavior**When I add a fixed-action-btn to my page, other inputs and buttons were usable in MDB 7.5.4.
**Actual behavior**I upgraded to 9.4 yesterday. Now, other inputs and buttons on the page are in-accessible.It works fine if I place it at bottom right nowhere near the inputs but it will not be near the actual form. I cannot create space for it near as I need the as much of the screen as possible for the form and display. Essentially the code is one fixed button, and two cards in a container. The fixed button overlaps the first card with all inputs controls which have become in accessible.
**Resources (screenshots, code snippets etc.)**
<div class="fixed-action-btn d-print-none px-0 mr-0" style="top: 105px; left: 0px;">
<a mdbBtn floating="true" class="text-white" color="red" size="lg" mdbWavesEffect
mdbTooltip="Save CodePath" (click)="confirmSave()">
<mdb-icon fas icon="save" class="mt-0"></mdb-icon>
</a></div>
<div class="container col-lg-12">
<div class="row">
<div class="col-lg-6">
<mdb-card cascade="true" narrower="false">
<!--Card image-->
<div class="view view-cascade indigo lighten-2 narrower py-2 mx-4 mb-1 d-flex
justify-content-between align-items-center">
<div>
<button mdbBtn type="button" color="unique" rounded="true" size="sm" class="px-2" mdbWavesEffect
(click)="confirmSave()" mdbTooltip="Save Code Path" placement="right" [hidden]="true">
<mdb-icon fas icon="save" class="mt-0"></mdb-icon>
Save
</button>
</div>
<h4 class="white-text mx-3">
{{title}}
<mdb-icon fas icon="question-circle" size="1x" class="amber-text ml-1" aria-hidden="true"
mdbTooltip="Help on New or Edit Codepath Page" placement="right"
(click)="helpModal.show()">
</mdb-icon>
</h4>
<div>
<button mdbBtn type="button" color="unique" rounded="true" size="sm" class="px-2" mdbWavesEffect
(click)="cancelPlanChanges()" mdbTooltip="Discard changes" placement="left">
<mdb-icon fas icon="times-circle" class="mt-0"></mdb-icon>
Cancel
</button>
</div>
</div>
<mdb-card-body class="mt-0 py-0">
<div class="px-1 py-2 text-primary">
<form [formGroup]="treatmentPlanForm">
<div class="row">
<div class="col md-form d-inline-block mt-0 py-0 mb-0">
CodePath Name:
<input mdbInput mdbValidate id="name" type="text" class="form-control mt-2 py-0"
formControlName="treatmentPlanFormName">
<mdb-error *ngIf="treatmentPlanFormName.invalid" class="requiredFont">*</mdb-error>
</div>
<div class="col mt-0 py-0 mb-0">
<!--<mdb-checkbox #isTemplateCheckBox [default]="false" [checked]="false" [(ngModel)]="saveAsTemplate"
[ngModelOptions]="{standalone: true}" [hidden]="!saveAsTemplate"
(change)="logStatus()" class="text-secondary mt-2 py-0" color="unique"
[class.disabled]="saveAsTemplate" placement="right">
Save as Template
</mdb-checkbox>-->
<div class="col md-form md-outline mt-0 py-0 mb-0">
Description:
<textarea mdbValidate type="text" id="desc" class="md-textarea form-control mt-0 py-0 mb-0"
rows="2" mdbInput formControlName="treatmentPlanFormDesc"></textarea>
<mdb-error *ngIf="treatmentPlanFormDesc.invalid" class="requiredFont">*</mdb-error>
</div>
<!--Optional Data:
<button mdbBtn class="ml-2" color="unique" size="sm" rounded="true" (click)="addOrEditComments()">
{{addCommentsTitle}}
</button>-->
</div>
</div>
<div class="row">
<div class="col md-form mt-3 py-0 mb-1">
Anatomical Heading:
<mdb-select mdbValidate class="font-weight-normal mt-0 py-0" [options]="anatomicalHeaderOptions"
formControlName="treatmentPlanFormAnotHeading"
(ngModelChange)="getSelectedHeadingValue($event)">
</mdb-select>
<mdb-error *ngIf="treatmentPlanFormAnotHeading.invalid" class="requiredFont">*</mdb-error>
</div>
<div class="col md-form mt-3 py-0 mb-1">
Pathological Treatment:
<mdb-select mdbValidate class="font-weight-normal mt-0 py-0"
[options]="anatomicalHeaderTypeOptions" formControlName="treatmentPlanFormAnotType"
(ngModelChange)="getSelectedTypeValue($event)">
</mdb-select>
<mdb-error *ngIf="treatmentPlanFormAnotType.invalid" class="requiredFont">*</mdb-error>
</div>
</div>
<div class="row mb-0 py-0">
<div class="col md-form mt-3 py-0 mb-0">
Anatomical Subsection:
<input mdbInput type="text" class="form-control mt-2 py-0 mb-0"
formControlName="treatmentPlanFormSubsection">
<br />
</div>
<div class="col md-form md-outline mt-3 py-0 mb-0">
Additional Instructions:
<textarea type="text" id="additionalinstructions" class="md-textarea form-control mt-0 py-0"
rows="2" mdbInput formControlName="treatmentPlanFormAdditionalInstructions"></textarea>
</div>
</div>
<div class="row">
<div class="col md-form md-outline mt-0 py-0 mb-2">
Additional Comments:
<textarea type="text" id="additionalcomments" class="md-textarea form-control mt-0 py-0"
rows="2" mdbInput formControlName="treatmentPlanFormAdditionalComments">
</textarea>
</div>
<div class="col md-form mt-0 py-0 mb-2">
</div>
</div>
</form>
<div class="helpFont ml-4">
*** Help: Use the buttons below to add, edit or delete a Phase after filling up required fields above.
</div>
<!-- Treatment Phases table -->
<mdb-card class="ml-0 mr-0" cascade="true" narrower="false">
<div class="view view-cascade indigo lighten-2 narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
<div>
<button mdbBtn type="button" color="unique" rounded="true" size="sm" class="px-2"
mdbWavesEffect (click)="openNewOrEditPhase(null)" mdbTooltip="New Treatment Phase"
placement="right" [disabled]="!treatmentPlanForm.valid">
<mdb-icon fas icon="plus" class="mt-0"></mdb-icon>
Add
</button>
<button mdbBtn type="button" color="unique" rounded="true" size="sm" class="px-2"
mdbWavesEffect (click)="editSelectedPhase()" mdbTooltip="Edit selected phase"
placement="left" [disabled]="previousSelected == null">
<mdb-icon fas icon="pencil-alt" class="mt-0"></mdb-icon>
Edit
</button>
</div>
<h5 href="" class="white-text mx-3">
Phases
<mdb-icon fas icon="question-circle" size="1x" class="amber-text ml-1" aria-hidden="true"
mdbTooltip="Help on Treatment Phases table" placement="right"
(click)="helpModal1.show()">
</mdb-icon>
</h5>
<div>
<button mdbBtn type="button" color="unique" rounded="true" size="sm" class="px-2"
mdbWavesEffect (click)="delete()" mdbTooltip="Delete selected phases"
placement="left" [disabled]="previousSelected == null">
<mdb-icon fas icon="times" class="mt-0"></mdb-icon>
Delete
</button>
</div>
</div>
<div class="px-4 justify-content-between">
<div class="table-wrapper table-responsive">
<div class="helpFont">*** Help: Please click on a row to select.</div>
<table mdbTable #tableEl="mdbTable" class="mb-0 table-editable" hover="true" small="true" striped="true">
<thead class="deep-purple lighten-3">
<tr>
<th class="th-lg" style="text-align:left">
Name
</th>
<th class="th-lg" style="text-align:left">
Description
</th>
<th class="th-lg" style="text-align:left">
Treatments
</th>
<th class="th-sm" style="text-align:left">
Priority
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let phase of phases; let i=index" (dblclick)="editPhase(phase)"
(click)="onRowSelect(phase, $event)" [class.rowselected]="phase.selected"
mdbTooltip="Please click on a row to select.">
<!--<th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
scope="phase">
</th>-->
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<span>
{{phase.name}}
</span>
</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<span>
{{phase.description}}
</span>
</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<span *ngIf="!saveAsTemplate">
{{phase.Treatments.length}}
</span>
<span *ngIf="saveAsTemplate">
{{phase.TemplateTreatments.length}}
</span>
</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<a *ngIf="phase.priority > 1" (click)="movePhaseUp(phase, i)"
mdbTooltip="Move up">
<mdb-icon fas icon="arrow-circle-up"></mdb-icon>
</a>
<a *ngIf="phase.priority < phases.length" (click)="movePhaseDown(phase, i)"
mdbTooltip="Move down">
<mdb-icon fas icon="arrow-circle-down"></mdb-icon>
</a>
</td>
</tr>
</tbody>
<tfoot class="deep-purple lighten-3">
<tr>
<td colspan="5" style="" align-content="left">
<mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="phases">
</mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</mdb-card>
</div>
</mdb-card-body>
</mdb-card>
</div>
<!-- Patient code path details display-->
<div class="col-lg-6">
<mdb-card class="">
<mdb-card-body>
<div class="col grey lighten-3 h-25 d-inline-block">
<h5>CodePath Name: {{treatmentPlanFormName.value}}</h5>
<div class="row">
<div class="col">
Anatomical Heading: {{anatomicalHdgName}}
</div>
<div class="col">
Type: {{anatomicalHdgType}}
</div>
</div>
<div class="row py-4">
<div class="col">
Anatomical Subsection: {{treatmentPlanFormSubsection.value}}
</div>
<div class="col">
Description: {{treatmentPlanFormDesc.value}}
</div>
</div>
<div class="row">
<div class="col">
Additional Comments: {{additionalComments}}
</div>
<div class="col">
Additional Instructions: {{additionalInstructions}}
</div>
</div>
<div class="table-wrapper table-responsive">
<table class="mb-0" mdbTable small="true" striped="true">
<thead class="grey lighten-3">
<tr>
<th class="th-lg font-weight-bold" style="width:20px">
Phases and Treatments:
</th>
</tr>
</thead>
<tbody>
<tr mdbTableRow *ngFor="let phase of phases;let i = index">
<td class="font-weight-bold">
Phase Name: {{phase.name}} -- {{phase.description}}
<div class="">
<table mdbTable>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Type</th>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th scope="col">Modifier</th>
<th scope="col">Quantity</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody *ngIf="!saveAsTemplate">
<tr mdbTableCol *ngFor="let treatment of phase.Treatments">
<td>{{treatment.category}}</td>
<td>{{treatment.treatmentType}}</td>
<td>{{treatment.code}}</td>
<td>{{treatment.description}}</td>
<td>{{treatment.modifier}}</td>
<td>{{treatment.quantity}}</td>
<td>{{treatment.comments}}</td>
</tr>
</tbody>
<tbody *ngIf="saveAsTemplate">
<tr mdbTableCol *ngFor="let treatment of phase.TemplateTreatments">
<td>{{treatment.category}}</td>
<td>{{treatment.treatmentType}}</td>
<td>{{treatment.code}}</td>
<td>{{treatment.description}}</td>
<td>{{treatment.modifier}}</td>
<td>{{treatment.quantity}}</td>
<td>{{treatment.comments}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-card-body>
</mdb-card>
</div>
</div>
If you want to keep using the fixed button set its height and width to fit-content. But since you are using it as a normal button, I suggest you change it to floating buttons and position it accordingly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Desktop
- Browser: Any
- OS: Windows
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
Unfortunately I am unable to reproduce this error. Can you please send some code that I can copy and run to see what's going on? Containing all the variables, etc.
lalithkx free commented 4 years ago
I will Build a simple project with my settings and send you this weekend. Can you share your email please? (Or send it to my email). Thx
Grzegorz Bujański staff commented 4 years ago
You can send the project to g.bujanski@mdbootstrap.com
lalithkx free commented 4 years ago
I sent an email with a working project to demonstrate the issue. I also brought up another issue with the bread crumbs bar which I brought up long back but couldn't demonstrate correctly at https://mdbootstrap.com/support/angular/mdb-breadcrumb-height/
Grzegorz Bujański staff commented 4 years ago
I checked my email and I can't see your messages. I have also looked in spam and there is nothing. Can you send the message again?
lalithkx free commented 4 years ago
The email is being rejected because of the attachment. I resent the email with extension changed to .pdf instead of .zip. Please note that it is from lalithkx@hotmail.com.