[FIXED] why is my bootstrap page here not mobile friendly?

Issue

My site is hosted at "nateshmbhat.github.io". I have used mdboostrp's row and col for my dom. But its not mobile friendly (shows lot of background space).

Site : https://nateshmbhat.github.io/ . Its a static site.

How do i fix it ?

Site code : https://github.com/nateshmbhat/nateshmbhat.github.io

Solution

It looks like your cards use the class "m-5".

<div class="card m-5 hoverable projectCard" style="width: 22rem;">

If you want them to be responsive using boostrap the class is "col-md-5".

<div class="card col-md-5 hoverable projectCard">

Does it answer your question ?

Answered By - Paul92ilm

Answer Checked By - Pedro (PHPFixing Volunteer)

Read More

[FIXED] How can we create a sidenav bar that is responsive using only angular material?

Issue

Can I use Angular materials 4 to create a similar behavior of the following sidenav example made with mdbootstrap: the link shows a responsive sidenav with buttons with lists.

I don't want to use bootstrap 4 as it needs to add javascript and jQuery libraries for most of the components. And mdbootstrap uses jquery in some features.

If there is any other libraries, feel free to mention it.

Solution

If you combine the angular material sidenav and expansion panel components, you should be able to replicate the same design and functionality.

This is a quick example by simply copying a expansion panel into a responsive sidenav (both examples from angular material):

https://stackblitz.com/edit/angular-akre5x?file=app/sidenav-responsive-example.html

Answered By - pfeileon

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] how change style of element when click on icon in modal?

Issue

i create a modal with mdbModal and in my modal have 4 icons like image below.

i want when i click on each of icons , background color of circle and border color of icon change. here is my modal code:

<div mdbModal #addSocialModal="mdbModal" class="modal fade top" id="addSocialModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" style="justify-content: center; max-width: 100%"
       role="document">
    <div class="modal-content addSocialModal-size modal-lg"
         style="text-align: center">


      <form [formGroup]="createProjectForm" (ngSubmit)="onAddSocial()">

        <div class="modal-body mx-3 d-rtl" style="margin-top: 50px;margin-bottom: 10px">

          <a class="socialProject icon-instagram" id="instagramm" #instagramm
             (click)="onClickSocial('instagram')"
             style="border: 1px solid #b913bd"></a>
          <a class="socialProject icon-telegram" id="telegram"
             (click)="onClickSocial('telegram')"
             style="border: 1px solid #19b4ff"></a>
          <a class="socialProject icon-linkedin" id="linkedin"
             (click)="onClickSocial('linkedin')"
             style="border: 1px solid #004a73"></a>
          <a class="socialProject icon-twitter" id="twitter"
             (click)="onClickSocial('twitter')"
             style="border: 1px solid #95d8fe"></a>

        </div>

        <li class="create-project-btn-position d-rtl">

          <button class="btn cancel-btn" (click)="addSocialModal.hide()">
            لغو
          </button>
          <button [disabled]="!createProjectForm.valid" type="submit" class="btn create-project-btn">
            اتصال اکانت
          </button>

        </li>

      </form>
    </div>
  </div>
</div>

and here is my component.ts code for onClickSocial method:

onClickSocial(social) {

    if (social === 'instagram') {

      document.getElementById('instagramm').style.backgroundColor = 'red';
    }
    }

but it is not work. when i test this code other than modal it works, but in my modal not works.

how can i fix this problem ?

Solution

Try using [ngClass] to apply css class based on condition-

--Component Code--

social: string;

onClickSocial(value) {
    this.social = value;
}

--HTML Code--

<a (click)="onClickSocial('instagram')" [ngClass]="{'active': social == 'instagram'}"></a>

--CSS Code--

.active {
  // style code
}

Answered By - random

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How freely pack, arrange themselves according to width of each html elements (divs) inside large html element (div)?

Issue

here's the image

Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.

I've added my laravel view code below if you need.

<div class="col-md-4 border border-primary rounded">
    <h4>Short Eats</h4>
    @foreach($shorteats as $shrt)                    
        <div>
        <a href="#" onclick="order('{{$shrt->dish_name}}')" class="btn btn-li btn-lg"> {{$shrt->dish_name}}</a>          
        </div>
    @endforeach                
</div>

<div class="col-md-4 border border-primary rounded">
    <h4>Rice</h4>
    @foreach($rice as $ric)                    
        <div>
        <a href="#" onclick="order('{{$ric->dish_name}}')" class="btn btn-li btn-lg"> {{$ric->dish_name}}</a>          
        </div>
    @endforeach                
</div>

Solution

You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:

HTML:

<div class="menu-container">
    <a href="#" onclick="order('{{$ric->dish_name}}')" class="food-item btn btn-li btn-lg">{{$ric->dish_name}}</a>          
</div>

CSS:

.menu-container {
  display: flex;
  flex-wrap: wrap;
}

.food-item {
  // styles for your anchor tag go here
}

Answered By - monsteronfire

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] how to enable dropdown items after cloning

Issue

i'm cloning the select dropdown using jquery, after cloning the dropdown in the next div, the dropdown options are not enabled, the dropdown is kind of disabled, i'm posting my code below, any suggestions appeciated

<div id="dvlstBusinessUnitAndRoles">
    <div class="row mt-5" id="dvRegion1">
        <div class="col-xl-3">
            <select class="mdb-select md-form colorful-select dropdown-primary" name="ddlProjectRegion" id="ddlProjectRegion1">
                <option value="" disabled selected>Select Region(s)</option>
            </select>
            <label>Select Region(s)</label>
        </div>
        <div class="col-xl-3">
            <select class="mdb-select md-form colorful-select dropdown-primary" name="ddlRoles" id="ddlRoles1">
                <option value="" disabled selected>Select Role(s)  </option>
            </select>
            <label>Select Role(s)</label>
        </div>
        <div class="col-xl-3">
            <div class="pt-4">
                <input type="checkbox" class="form-check-input" id="limitaccess">
                <label class="form-check-label" for="limitaccess">  Primary Region </label>
                <a href="#" id="hrefRegion" onclick="AddNewRow();" class="note"> <img id="imgNewRow" src="~/Content/images/plus-g.png" /></a>
            </div>
        </div>
    </div>
</div>

this is the function that i'm using for cloning the select dropdown

function AddNewRow() {
    var imgSource = '/Content/images/cross-g.png';
    var count = $("div [id^='dvRegion']").length + 1;
    var newId = 'dvRegion' + count;
    var newddlRegionId = 'ddlProjectRegion' + count;
    var newddlRoleId = 'ddlRoles' + count;
    var chkId = 'limitaccess' + count;
    $('<div/>', {
        id: newId,
        class: 'row mt-5'
    }).appendTo('#dvlstBusinessUnitAndRoles');
    $('#dvlstBusinessUnitAndRoles').children().last().replaceWith($("#dvRegion1").clone(true));
    $('#dvlstBusinessUnitAndRoles').children().last().attr('id', newId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('a').attr('onclick', 'DeleteRow("' + newId + '")');
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('input[type=text],select').attr('data-activates', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('id', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('name', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('id', newddlRoleId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('name', newddlRoleId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find(('li')).parent().attr('id', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("src", imgSource);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("id", 'imgDelete');
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('#limitaccess').attr('id', chkId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.form-check-label').attr('for', chkId);
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
}

Solution

i'm using mdbootstrap select dropdown, so after cloning i have to apply materialSelect property to cloned dropdown, after applying the property it's working fine, below i'm posting the code

function AddNewRow() {
        var imgSource = '/Content/images/cross-g.png';
        var count = $("div [id^='dvRegion']").length + 1;
        var newId = 'dvRegion' + count;
        var newddlRegionId = 'ddlProjectRegion' + count;
        var newddlRoleId = 'ddlRoles' + count;
        var chkId = 'limitaccess' + count;
        $('<div/>', {
            id: newId,
            class: 'row mt-5'
        }).appendTo('#dvlstBusinessUnitAndRoles');
        $('#dvlstBusinessUnitAndRoles').children().last().replaceWith($("#dvRegion1").clone(true));
        $('#dvlstBusinessUnitAndRoles').children().last().attr('id', newId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('a').attr('onclick', 'DeleteRow("' + newId + '")');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('input[type=text],select').attr('data-activates', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('id', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('name', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('id', newddlRoleId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('name', newddlRoleId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find(('li')).parent().attr('id', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("src", imgSource);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("id", 'imgDelete');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('#limitaccess1').attr('id', chkId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.form-check-label').attr('for', chkId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.mdb-select').materialSelect('destroy');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.mdb-select').materialSelect();
        $('#dvRegion1').find('.mdb-select').materialSelect('destroy');
        $('#dvRegion1').find('.mdb-select').materialSelect();
        $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    }

Answered By - How To Learn

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to load mdbootstrap vue into Laravel 5 with laravel-mix?

Issue

I am trying to install mdbootstrap vue into a Laravel 5.6 project, but i realy don't understand how i suppose to do it.

If somebody can give me a little tutorial, it would be nice of you ;-)

Solution

Try this(updated)...

(Assuming you have already installed laravel)

Go to your project directory and do:

npm install --save mdbvue

You will also need:

npm install --save-dev babel-preset-stage-2

next go to resources/js/bootstrap.js and under the require('bootstrap'); add require('mdbvue'); it should look something like this:

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('mdbvue'); //<---this is what you need to add
} catch (e) {}

Next go to resources/sass/app.scss and add the MDB css under the bootstrap import, you might also need to import the font-awesome css:

// Material Design Bootstrap
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import '~bootstrap/scss/bootstrap';
@import "~mdbvue/build/css/mdb.css";

Now to compile your app.css and app.js files just do npm run dev

With this everything should be up and running and you are free to use MDBvue components or simply use MDB jQuery version.

This worked for me on a Laravel 5.7 project. Hope this helps.

Answered By - natral

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How do I divide cards into rows with every row having 4 cards

Issue

I want to make a site similar to E-commerce with cards and I am using Angular and MdBootstrap UI Kit.

Suppose I have 18 cards, I want 4 rows of 4 cards and last row should have 2 cards. My data for cards is coming from backend in json format.

But I am getting this Output.

What I desire is this.

Code I have currently

html:-

<div class="container">
  <div class="row" *ngFor='let row of grid'>
    <div class="col" *ngFor='let c of row'>
      <div style="margin: 10px">
        <mdb-card>
          <!--Card image-->
          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
          <!--Card content-->
          <mdb-card-body>

            <!--Title-->
            <mdb-card-title>
              <h4>{{c}}</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>
      </div>
    </div>
  </div>
</div>

ts:-

export class HomeComponent implements OnInit {
  cards: number;
  grid: number[][];
  constructor() {}

  ngOnInit() {
    this.cards = 18;
    this.gridgenerator();
  }

  gridgenerator(): number[][] {
    let last = this.cards % 4;
    let rows =
      this.cards % 4 === 0
        ? new Array(Math.floor(this.cards / 4))
        : new Array(Math.floor(this.cards / 4 + 1));
    this.grid = new Array(rows);
    for (let r = 0; r < rows.length; r++) {
      if (r === rows.length - 1) {
        this.grid[r] = new Array(last);
      } else {
        this.grid[r] = new Array(4);
      }
    }
    console.log(this.grid);

    return this.grid;
  }
}

Solution

Here is a working angular example, using only the flex properties.

The host element is a flex container and has the following css properties :

:host {
  display: flex;
  flex-wrap: wrap;
}

while the mdb-card is a flex item with the following properties :

mdb-card {
  margin: 10px;
  flex-basis: calc(25% - 2 * 10px); // 25% minus left and right margins.
}

No need of .row and .col elements.

Answered By - Quentin Petel

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] How to remove MDBootstrap a class defult selecte color

Issue

I'm using MDBootstrap for my project. I have used list of <a href> tags for a list as below

<a  class="list-group-item list-group-item-action text-right  hoverlist "
 id="list-1"
 data-toggle="list"
 href="#list-1"
 role="tab"
 aria-controls="cat01">cat01<i class="fa fa-home"></i> </a>

This is the final preview

What I wants to do is to remove this blue color and then change color in to red. So I have tried below code

.hoverlist{
background-color:red;
}

But nothings get changes. Could anyone please tell me why is that?

Thanks

Solution

Well, there are two ways;

css properties are overridden from top to bottom:

The first is: I don't understand whether the css implemented resides in an external file or not. But if it is place the link to the css file under the link for mdbootstrap. Like this:

<html>
<head>
<link href="mdbootsstrap.css" rel="stylesheet">
<link href="your css file" rel="stylesheet">
</head>
</html>

or secondly, use the following code:

<a  class="list-group-item list-group-item-action text-right  hoverlist "
id="list-1"
data-toggle="list"
href="#list-1"
role="tab"
aria-controls="cat01" style="background-color: red">cat01<i class="fa fa-home"></i> </a>

Here, i have added style attribute to the link which will override all other css implementations.

See this pen: https://codepen.io/MansoorAhmed/pen/yLBKppw

Answered By - user11484655

Answer Checked By - Pedro (PHPFixing Volunteer)

Read More

[FIXED] How to grid MDBootstrap cards in one row?

Issue

I've used MDBootstrap cards in my React project.I'am finding difficult aligning in one row. Aligning 3 cards is what expected,but, the cards are stuck in vertical position only. See the code below for reference.

<MDBContainer>
      <MDBRow >      
      <MDBCol >
      <MDBCard style={{ width: "18rem", borderRadius:'10px'}} >
      { 
        data.map((data, index) => {
          return <div key={index}>
          <MDBCardImage className="img-fluid" src={data.img}
          waves style={{borderRadius:'10px'}} 
          style={{height:'350px', width:'310px'}} />
          <MDBCardBody>
            <MDBCardTitle style={{color:'black'}}>{data.title}</MDBCardTitle>
            <hr/>
            <MDBCardText>
            {data.content}
            </MDBCardText>
            <MDBBtn href="#">Github</MDBBtn>
            <MDBBtn href="#">Live Demo</MDBBtn>
          </MDBCardBody>
          <br/>
          </div> 
        })
      }  
      </MDBCard>
    </MDBCol>
  </MDBRow>
</MDBContainer>

Below is the image. This is what the end result I'am getting. Any solution?

Solution

You only have 1 column inside row and iterating data inside column only which results in single column stacked format. Your iteration should return separate columns like:

<MDBRow>
    {
    data.map((data, index) => {
    return <MDBCol key={index}>
        <MDBCard style={{ width: "18rem", borderRadius:'10px'}}>
            <MDBCardImage className="img-fluid" src={data.img} waves style={{borderRadius:'10px'}} style={{height:'350px', width:'310px'}} />
            <MDBCardBody>
                <MDBCardTitle style={{color:'black'}}>{data.title}</MDBCardTitle>
                <hr />
                <MDBCardText>
                    {data.content}
                </MDBCardText>
                <MDBBtn href="#">Github</MDBBtn>
                <MDBBtn href="#">Live Demo</MDBBtn>
            </MDBCardBody>
        </MDBCard>
    </MDBCol>
    })
    }
</MDBRow>

Answered By - ravibagul91

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] How to resolve 'mdb-accordion' is not a known element: error in Angular app?

Issue

I am trying to add the Material Design Bootstrap Accordion to my angular app using this example.

Here is my HTML:

<mdb-accordion [multiple]="false">
    <mdb-accordion-item [collapsed]="false">
      <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
      <mdb-accordion-item-body>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
        aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
      </mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>

Here is the error message I am getting:

'mdb-accordion' is not a known element:

1. If 'mdb-accordion' is an Angular component, then verify that it is part of this module.

2. If 'mdb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng(0)

Here is what I have in my Angular.json:

"styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "./node_modules/quill/dist/quill.core.css",
          "./node_modules/quill/dist/quill.snow.css",
          "node_modules/animate.css/animate.css",
          "src/styles.css"
        ],
"scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js",
          "./node_modules/quill/dist/quill.js"
         ]

And I have the following in my App Module:

import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
imports: [
    MDBBootstrapModule.forRoot(),
],
})
export class AppModule { }

I tried adding something like MDBootstrapAccordion to the import in App Module, but nothing was appearing.

Can someone please tell me what I'm missing to get the accordion displaying?

Solution

You use MDB Free and mdb-accordion is not available in this version. You would need to purchase PRO version in order to use it in your project.

As you can see, there is a 'MDB Pro component' label in the documentation:

https://mdbootstrap.com/docs/angular/advanced/accordion/

Answered By - idzark

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to change the underline color of the input component in MD Bootstrap

Issue

So I'm using the Input Group Component from MDBootstrap.

I was wondering if there's a way around for changing the color of the blank of the input field component in MD Bootstrap. Like at the moment, it looks like this (without focus):

When I click on this input field, it looks like this (with focus, the color of the input field blank changes to green):

The code for the this component is as follows:

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Name</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

I was wondering if there's a way around for changing the color of the input field blank to black instead of green when we click on it. Thanks!

Solution

Set backgroundImage style with <input /> would work

Try it in-text:

const style = {
  backgroundImage: `linear-gradient(0deg, black 2px, rgba(0, 150, 136, 0) 0),
    linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0)`
};
const App = () => {
  return (
    <div className="App">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">
            Large
          </span>
        </div>
        <input
          type="text"
          class="form-control"
          aria-label="Large"
          style={style}
          aria-describedby="inputGroup-sizing-sm"
        />
      </div>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
  integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"
  crossorigin="anonymous"
/>

---

The step to achieve it:

If you check the style in the browser,

You would find that color with animation, copy it and change that color, and that's it.

Answered By - keikai

Answer Checked By - Robin (PHPFixing Admin)

Read More

[FIXED] How to change the font and border color of the Button Component in MD Bootsrap React

Issue

So I'm using a button component from MDBootrap. To be specific I'm using an Outline Button Component which looks like this:

The code that's given on the website for this particular component is as follows:

<button type="button" class="btn btn-outline-warning">Warning</button>

I was wondering if there's a way around to change the font color as well as the border color of this button component since at the moment it's not matching well with the theme of my website. Thanks!

Solution

If you want to reuse styles, create a new css class:

.btn.my-cusomized-button {
    border-color: pink;
    color: pink;
    background-color: transparent;
    border: 1px solid pink;
}

<button
  type="button"
  class="btn my-cusomized-button"
>
  Primary
</button>

n.b. css class my-cusomized-button and pink as color are just an example. Use your colors and class which better suits your need

Answered By - Danko

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How can i use code from codepen in my project

Issue

I want to use the code from here in my project https://codepen.io/zso2u/pen/jKmmqB

<div class="container-fluid">
  <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner row w-100 mx-auto">
      <div class="carousel-item col-md-4 active">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 4</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 5</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 6</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="carousel-item col-md-4">
        <div class="card">
          <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Card 7</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

This is my project but when i copy paste the code to my site its not displayed correctly for some reason and i cant figure out why.

Here is my site abusive-secretary.surge.sh

How can i use this code inside my project?

When i copy and paste it i can only see 1 card at a time but i need to see 3 cards at a time.

What i try to do is make something like you can see on top of this page https://www.dapp.com/

Solution

Use this Bootstrap 4 CDN from MDBootstrap. I tried this CDN it works.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script>

Answered By - bharti parmar

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] How do I make multiple MDB modals on the same page and have different content in each modal pop up?

Issue

How do I make multiple MDB modals on the same page and have different content in each modal pop up? Currently the content in the modal-body of the last modal will show up when either of the modals are clicked even though I have separate content in each modal-body? I used the MDB modal markup from here: https://mdbootstrap.com/docs/jquery/modals/generator/ Why is this?

Here is the my code:

    <!-- Modal 1 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 1
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 1</h4>
          </div>
          <div class="modal-body">
            Content 1
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 1 -->
    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

Solution

#basicModal id is used in both modals. This value should be unique.

You need to change this value in the second modal code, for example:

    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="secondModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #secondModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="secondModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

Answered By - idzark

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to set a max width for html div for mobile devices using css

Issue

On Desktop screens everything is responsive and okay. But on mobile devices content doesn't fit the screen, I have to swipe to the left to see all the content, is there anyway to fix that using CSS?

<div class="row mx-md-5 px-md-4 px-5 mt-3 container">
 <blockquote class="blockquote">

            <div class="mb-0">Quote...
            </div>

          </blockquote>

          <div class="article">
                 <h1>......</h1>
                   <img>
              <p>........</p>
              ...............
          </div>

        </div>

This just an example to work with. And btw I'm using Md-bootstrap as font end framework.

Solution

This div element has a width of 500px, and margin set to auto.

div.container {
  width:500px;
  margin: auto;
  
}

Answered By - Moin Syed

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How would I reference MDbootstrap stylesheet in html

Issue

I am aware that in HTML the way to reference stylesheets is something along these lines:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >

But what is the stylesheet reference for MDboostrap. I have looked all over the website and I can't find it and the website says that all the resources are free. Have I got to install something?

Solution

I did a quick research and I could find that you can download MDBoostrap or use the CDN. Links bellow:

• Download page: https://mdbootstrap.com/docs/jquery/getting-started/download/
• CDN examples: https://mdbootstrap.com/md-bootstrap-cdn/

Answered By - Ariel Alves Dutra

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] How To Get A Bootstrap Form To Capture Information To Include In An Email

Issue

<div class="card-body">
  <form action="mailto:example@gmail.com" method="GET">
    <!-- Header -->
    <div class="form-header bg-secondary">
      <h3 class="mt-2"><i class="fa fa-envelope"></i> Let's Conect:</h3>
    </div>
    <!-- Body -->
    <div class="md-form"> <i class="fa fa-user-circle-o prefix grey-text"></i>
      <input type="text" id="form-name" placeholder="Your Name" class="form-control">
      <label for="form-name"></label>
    </div>
    <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i>
      <input type="text" id="form-email" placeholder="Your Email" class=" form-control">
      <label for="form-email"></label>
    </div>
    <div class="md-form"> <i class="fa fa-tag prefix grey-text"></i>
      <input type="text" id="form-Subject" placeholder="A Subject" class=" form-control">
      <label for="form-Subject"></label>
    </div>
    <div class="md-form"> <i class="fa fa-pencil prefix grey-text"></i>
      <textarea id="form-text" placeholder="What would you like to talk about!?" placeholder="class=" form-control md-textarea " rows="3 "></textarea>
        <label for="form-text "></label>
    </div>
    <div class="text-center ">
        <button type="submit " class="btn btn-secondary ">Submit</button>
    </div>
</form>
</div>

I've created a form using bootstrap 4. When I click submit it will pull up the email and send it to the email given in the action but does not capture and of the form data. I've tried enctype="text/plain" and using method="GET" and method="POST".

I've used a contact form im a similar fashion likes this:

<form id="contact-form" action="mailto:test@gmail.com" method="POST" enctype="text/plain">
    <label for="name">Name</label>
    <input type="text" id="name" name="Name" placeholder="Name" required="required">

    <label for="email">Email</label>
    <input type="email" id="email" name="E-Mail" placeholder="Email@gmail.com" required="required">

    <label for="subject">Subject</label>
    <input type="text" id="subject" name="Subject" required="required"></input>

    <label for="message">Message</label>
    <textarea id="message" name="Message" required="required"></textarea>

    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

It would capture the form data as such:

Name=NAME
E-Mail=EMAIL@EMAIL.com
Subject=SUBJECT
Message=MESSAGE

and include it in the email. I'm looking to do this to avoid having to use a php if at all possible.

Solution

Check this out:

<div class="card-body">
    <form action="mailto:example@gmail.com" method="get" enctype="text/plain">
        <!-- Header -->
        <div class="form-header bg-secondary">
            <h3 class="mt-2"><i class="fa fa-envelope"></i> Let's Conect:</h3>
        </div>
        
        <!-- Body -->
        <div class="md-form"> <i class="fa fa-tag prefix grey-text"></i>
            <input type="text" id="form-Subject" name="subject" placeholder="A Subject" class="form-control" required/>
            <label for="form-Subject"></label>
        </div>
        <div class="md-form"> <i class="fa fa-pencil prefix grey-text"></i>
            <textarea id="form-text" name="body" placeholder="What would you like to talk about!?"
            class="form-control md-textarea " rows="15" style="overflow-y: scroll;"></textarea>
            <label for="form-text"></label>
        </div>
        <div class="text-center">
            <input type="submit" name="submit" value="Submit" class="btn btn-secondary"/>
        </div>
    </form>
</div>

Seems you forget to add name attribute to your form-controls. Also haven't added enctype="text/plain" to the form and did some error in the message <textarea>.

Also this code is written in mdbootstrap which is based on bootstrap-5 not bootstrap-4

Answered By - gpl

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More

[FIXED] Why is Prop not applied to component in component library vue js?

Issue

I am busy moving my components from our projects into a component library for ease of use and maintainability purposes. I am using this Vue/Nuxt Library template following the structure and processes outlined.

Currently I only have 2 components in there a TestButton.vue and a LoaderModal.vue .

The test button works fine when imported/called from an application when it sits in the library as it shows as expected and looks like it should as it is actually a mdb button (which I just used to test component imports). (we use MDB as our main component lib

The problem is with the Loading Modal. Normally you would set the show property of the modal to show or hide it like so.

<template>
  <mdb-modal centered :show="showLoader">
    <mdb-modal-body class="text-center">
      <div class="d-flex justify-content-center" v-if="selectedLoader==='BALL'">
        <div class="spinner-grow" role="status" style="color: #005250; width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <h3 class="block" style="margin-top:16px" v-if="longLoadingText!=null">{{ longLoadingText }}</h3>
      <h3 class="block" style="margin-top:16px" v-else>{{ text }}</h3>
    </mdb-modal-body>
  </mdb-modal>
</template>

using props to show,hide and control text like so

 props: {
    showLoader: { default: true, type: Boolean },
    text: { default: "Loading", type: String },
  },

and it works fine if I run it in the component library itself using

vue serve ./src/components/LoaderModal

but when I set the showLoader prop to true from the application that imports the library it does not show. I can see the modal is in the DOM but the display is set to none. There are no errors in the console and if I change the Display to "block" the LoadingModal Shows.

Here is the html copied from the DOM that shows it is there, but display is just set to "none"

<div data-v-bfb6b926="" data-v-6a672d6c="" class="modal" style="opacity: 1;">
  <div data-v-bfb6b926="" role="document" class="modal-dialog modal-dialog-centered" style="transform: translate(0px, 0px);">
    <div data-v-bfb6b926="" class="modal-content">
      <div data-v-c35b1502="" data-v-6a672d6c="" class="text-center modal-body">
        <div data-v-6a672d6c="" data-v-c35b1502="" class="d-flex justify-content-center">
          <div data-v-6a672d6c="" data-v-c35b1502="" role="status" class="spinner-grow" style="color: rgb(0, 82, 80); width: 3rem; height: 3rem;"><span data-v-6a672d6c="" data-v-c35b1502="" class="sr-only">Loading...</span></div>
        </div>
        <!---->
        <!---->
        <h3 data-v-6a672d6c="" data-v-c35b1502="" class="block" style="margin-top: 16px;">Loading some stuff</h3>
      </div>
    </div>
  </div>
</div>

My Library Package.json looks as follow

{
  "name": "@myScope/web-commons",
  "version": "0.1.23",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report --target lib --name web-commons ./src/index.js",
    "lint": "vue-cli-service lint",
    "docs:build": "vuepress build docs",
    "docs:dev": "vuepress dev docs"
  },
  "main": "dist/web-commons.common.js",
  "files": [
    "src",
    "assets",https://stackoverflow.com/posts/63504989/edit#
    "dist/*.{js,css}"
  ],
  "dependencies": {
    "mdbvue": "^6.7.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/babel-preset-app": "^4.4.6",
    "@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11",
    "vuepress": "^1.5.2"
  }
}

and the plugin looks as follows in my main project.

import Vue from 'vue'
import * as componets from '@myScope/web-commons'
Vue.use(componets)

Then it is also added to the nuxt.config as a plugin. Please help

EDIT Below is the value of the props from the vue dev panel

Update

The following is the link to the codesandbox project for the component library. The library is also on Npm. Try using the LoaderModal Component in any nuxt project to see problem. Code Sandbox Component Library

Component Implementation Example Nuxt js

Solution

The actual problem seem to have been that all the required css components of the mdblibrary was not being import despite being imported in the index of the component library.

It seems that when adding a plugin to nuxt it calls the install method and nothing else. The solution was to import the css into the component itself and making it "scoped" otherwise it will affect the components in the main application.

<style
scoped
>
@import "../../node_modules/mdbvue/lib/css/mdb.min.css"; 
</style>

Answered By - Terblanche Daniel

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How do I use the async .update() method for DataTables in MDBootstrap?

Issue

I am new to MDBootstrap and I am trying to learn how to use the DataTables. I have seen the examples on their website for Async table updates, however I found it confusing to convert it to my use case.

I am interested in learning how to use the async table update method specifically since I would like my table to update four columns dynamically based on filters that I am collecting from Dropdowns.

I would like the table to get its data by calling a PHP endpoint that will return data back in JSON and I am not understanding how to use the asyncTable.update() method (based on their example).

For the sake of simplicity, let's assume the PHP endpoint returns JSON that looks similar to this:

[ { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }, { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }]

Based on the example code snippet from the MDBootstrap site (listed below), how do I modify the code to call my own endpoint? I do not understand the javascript syntax within the .update() method of the example code:

const columns = [
  { label: 'A', field: 'a' },
  { label: 'B', field: 'b' },
  { label: 'C', field: 'c' },
  { label: 'D', field: 'd' },
];

const asyncTable = new mdb.Datatable(
  document.getElementById('datatable'),
  {
    columns,
  }
);

//var url = 'MY OWN PHP ENDPOINT URL';
var url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
  .then((response) => response.json())
  .then((data) => {
    asyncTable.update(
      {
        rows: data.map((user) => ({
          ...user,
          address: `${user.address.city}, ${user.address.street}`,
          company: user.company.name,
        })),
      },
      { loading: false }
    );
  });
});

I would appreciate any help on how to use this method using my own end point and not the example endpoint and data structure presented.

Thanks

Solution

you have to change link in fetch for your endpoint's URL

  fetch('https://custom-api.com/rows')

The update() method takes two parameters: data and options. Upon changing the URL you have to modify the data parameter to correspond to your data. In your example it will look like:

   fetch('https://your-url.com/rows')
  .then((response) => response.json())
  .then((data) => {
    asyncTable.update(
      {
        rows: data.map((row) => ({
          a: row.a,
          b: row.b,
          c: row.c,
          d: row.d
        })),
      },
      { loading: false }
    );
  });

this example might look cleaner for you: https://mdbootstrap.com/snippets/standard/m-duszak/3000204#js-tab-view

Answered By - Michal Duszak

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How can I manually mark an input in my mdbootstrap angular.js form as invalid?

Issue

With my current code I am able to make inputs show up as invalid if they are blank or do not fit the format of the input's type (eg: email must have the '@' and '.' format).

My next step is to make sure the password and confirmPassword fields match up. I have created a function that compares the two, but am having a lot of trouble implementing it with the mdbootstrap form.

The function that I have been playing around with:

mustMatch(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
  const control = formGroup.controls[controlName];
  const matchingControl = formGroup.controls[matchingControlName];

  if (matchingControl.errors && !matchingControl.errors.mustMatch) {
    // var passwordInput = document.getElementById('password');
    // passwordInput.classList.remove('ng-valid');
    // passwordInput.classList.add('ng-invalid');
    formGroup.controls['password'].setErrors({'incorrect': true});
    return;
  }

  if (control.value !== matchingControl.value) {
    matchingControl.setErrors({ mustMatch: true });
  } else {
    matchingControl.setErrors(null);
  }
};

}

The elements I need to make invalid:

<div class="col-xs-12">
      <div class="form-outline">
        <input formControlName="password" type="password" id="password" class="form-control pb-3" required/>
        <label class="form-label" for="password">Password</label>
        <div class="invalid-feedback">Please enter your password.</div>
      </div>
    </div>

    <div class="col-xs-12">
      <div class="form-outline">
        <input formControlName="confirmPassword" type="password" id="confirmPass" class="form-control pb-3" required/>
        <label class="form-label" for="confirmPass">Confirm Password</label>
        <div class="invalid-feedback">Please confirm your password.</div>
      </div>
    </div>

The initialization of the form:

ngOnInit(): void {
document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});
this.setupSignupForm();

const forms = document.querySelectorAll('.needs-validation');

Array.prototype.slice.call(forms).forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  }, false);
});



setupSignupForm(): void {
    this.signupForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['',
        [
          Validators.required,
          Validators.email,
        ]],
      confirmEmail: ['',
        [
          Validators.required,
          Validators.email,
        ]],
      joinCode: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['',
        [
          Validators.required,
        ]]
    }, {
      validators: [this.mustMatch('password', 'confirmPassword'), this.mustMatch('email', 'confirmEmail')]
    });
  }

Please let me know if you can figure out how to do this. I have been bashing my head against the wall for a while on this problem!

Here is a picture of what I am dealing with:

Solution

I think it's better to use the validator for each form-control you need instead of the whole form-group, because:

• The form-group validators will be checked on any changes within the form, even if the changes are not related to the target form-control(s) (password and email in your case).
• You have to handle setting the errors (setErrors) manually, and the same form removing them.

Instead of that you can achieve it by assigning the validator to the form-control itself, like the following:

setupSignupForm(): void {
  this.signupForm = this.formBuilder.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: [
      '',
      [Validators.required, Validators.email, this.mustMatch('email')]
    ],
    joinCode: ['', Validators.required],
    password: ['', Validators.required],
    confirmPassword: ['', [Validators.required, this.mustMatch('password')]]
  });
}

mustMatch(matchingControlName: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.parent) return;

    const matchingCtrlValue = control.parent.get(matchingControlName).value;

    if (control.value !== matchingCtrlValue) {
      return { mustMatch: true };
    } else {
      return null;
    }
  };
}

Answered By - Amer

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More