Topic: Fixed action button making other inputs and buttons inaccessable

lalithkx free asked 4 years ago


**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>


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.


Grzegorz Bujański staff answered 4 years ago


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.



Please insert min. 20 characters.

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