I generated a snippet that is not running when I download it

Topic: I generated a snippet that is not running when I download it.

epochsys priority asked 4 months ago

Expected behavior A popup form should appear Actual behavior Popup form does not show Resources (screenshots, code snippets etc.) I generated the snippet from here Material Design for Bootstrap Launch modal login form

Maria Doe Password Login

I do not know which mdb.min.css mdb.min.js file. that I can use with this example? I am also unable to find the latest mdb.min.js from mu downloads. The files I find are mdb.es.min.js and mdb.umd.min.js.

epochsys priority commented 4 months ago

Material Design for Bootstrap Launch modal login form

<!-- Modal -->
<div
  class="modal top fade"
  id="staticBackdrop5"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
  data-mdb-backdrop="true"
  data-mdb-keyboard="true"
>
  <div
    class="modal-dialog modal-dialog-centered text-center d-flex justify-content-center"
  >
    <div class="modal-content w-75">
      <div class="modal-body p-4">
        <img
          src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp"
          alt="avatar"
          class="rounded-circle position-absolute top-0 start-50 translate-middle h-50"
        />
        <form>
          <div>
            <h5 class="pt-5 my-3">Maria Doe</h5>

            <!-- password input -->
            <div data-mdb-input-init class="form-outline mb-4">
              <input type="password" id="password1" class="form-control" />
              <label class="form-label" for="password1">Password</label>
            </div>

            <!-- Submit button -->
            <button
              type="submit"
              data-mdb-button-init
              data-mdb-ripple-init
              class="btn btn-primary"
            >
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript" src="js/script.js"></script>

<p>

Material Design for Bootstrap
    
    
    
    
    
    
    
    
  
  
    
    
      Launch modal login form
    </p>

<pre class="prettyprint"><code>
<div
  class="modal top fade"
  id="staticBackdrop5"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
  data-mdb-backdrop="true"
  data-mdb-keyboard="true"
>
  <div
    class="modal-dialog modal-dialog-centered text-center d-flex justify-content-center"
  >
    <div class="modal-content w-75">
      <div class="modal-body p-4">
        <img
          src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp"
          alt="avatar"
          class="rounded-circle position-absolute top-0 start-50 translate-middle h-50"
        />
        <form>
          <div>
            <h5 class="pt-5 my-3">Maria Doe</h5>

<div data-mdb-input-init class="form-outline mb-4">
              <input type="password" id="password1" class="form-control" />
              <label class="form-label" for="password1">Password</label>
            </div>

<button
              type="submit"
              data-mdb-button-init
              data-mdb-ripple-init
              class="btn btn-primary"
            >
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="js/mdb.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>
</code></pre>

Please insert min. 15 characters.

Add comment

Kamila Pieńkowska staff answered 4 months ago

0 0 Best answer

<p>Quick answer would be you need to use <code>mdb.min.css</code> and <code>mdb.umd.min.js</code>. </p>

<p>Are you trying to transition to version 7.3.2? If so in v7 we introduced breaking changes so if you trying to use it in existing project you will need to make some changes in it.</p>

<p>MDB follows the semantic versioning spec to keep the JavaScript ecosystem healthy and secure. In semantic versioning, a major version change (indicated by the change in the first digit in the version number) means there are substantial updates to an npm package that might require changes in your project.</p>

<p>We've prepared a comprehensive <a href="https://mdbootstrap.com/docs/standard/getting-started/migration-guide/" target="_blank">Migration Guide</a>. This guide explains how you can adapt your project to MDB v7 seamlessly. Also, you can view all the specific updates in our <a href="https://mdbootstrap.com/docs/standard/getting-started/changelog/" target="_blank">Changelog</a>, which details the changes in this version.</p>

<p>Please go through the migration guide to understand the changes and how to implement them in your project. If you encounter any issues or need further assistance, feel free to reach out. We’re here to help ensure a smooth transition to MDB v7.</p>

<p>If you still want to use version 6.4.1 you can use the <a href="https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/?_gl=1%2a14kpulw%2a_ga%2aMjExNjM2NTEyLjE2OTcxMTQ3ODE.%2a_ga_E9PS2EVWYS%2aMTcwMTIzODI1OC41LjEuMTcwMTI3NDQzNS40My4wLjA." target="_blank" rel="nofollow">legacy docs</a>. Legacy docs are always linked in our changelog.</p>

Please insert min. 20 characters.

Quick answer would be you need to use mdb.min.css and mdb.umd.min.js.

Are you trying to transition to version 7.3.2? If so in v7 we introduced breaking changes so if you trying to use it in existing project you will need to make some changes in it.

MDB follows the semantic versioning spec to keep the JavaScript ecosystem healthy and secure. In semantic versioning, a major version change (indicated by the change in the first digit in the version number) means there are substantial updates to an npm package that might require changes in your project.

We've prepared a comprehensive Migration Guide. This guide explains how you can adapt your project to MDB v7 seamlessly. Also, you can view all the specific updates in our Changelog, which details the changes in this version.

Please go through the migration guide to understand the changes and how to implement them in your project. If you encounter any issues or need further assistance, feel free to reach out. We’re here to help ensure a smooth transition to MDB v7.

If you still want to use version 6.4.1 you can use the legacy docs. Legacy docs are always linked in our changelog.

epochsys priority commented 4 months ago

Thanks, now it is working. Yes, I was trying to use it in the older project.

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 6.4.1
Device: Desktop
Browser: Chrome
OS: Windows 11
Provided sample code: No
Provided link: Yes

epochsys

5Support score
6Questions 1Answers 1Snippets