Share via

Exercise: Edit Pages in Explore Power Pages design studio

Mike Smith 0 Reputation points
2024-12-24T14:14:45.8933333+00:00

The exercise instructions call for manually adding this block to a page via VS Code:

<div role="alert" class="alert alert-info alert-dismissible"> <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong> Get your unlimited free education at <a href="https://learn.microsoft.com/">Microsoft Learn</a> </div>

According to the instructions, this should add a "dismissible" alert to the page:

  1. Press cross (x) icon to dismiss the alert.

After syncing and opening the page via the preview link, the alert appears but is not dismissible. Clicking the (x) icon does nothing.

Microsoft Power Platform Training
Microsoft Power Platform Training
Microsoft Power Platform: An integrated set of Microsoft business intelligence services.Training: Instruction to develop new skills.
507 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. AinhoaGiles 150 Reputation points
    2024-12-26T05:24:31.8533333+00:00

    It sounds like the Bootstrap JavaScript might not be loading properly, which is why the dismiss functionality isn't working. The data-bs-dismiss="alert" attribute relies on Bootstrap’s JavaScript to handle the click event and remove the alert.

    Here are a few things to check:

    1. Ensure Bootstrap JS is Loaded Verify that the Bootstrap JavaScript file is correctly linked in your HTML. Add this to the bottom of your page, just before the closing </body> tag:
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    Check for Errors in Console Open the developer console (F12 or right-click > Inspect > Console) and see if there are any JavaScript errors. If Bootstrap is not loading, you'll likely see an error about data-bs-dismiss not being recognized.

    Ensure Bootstrap CSS is Included If you haven't already, add the Bootstrap CSS to the <head> section:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    1. Confirm Dismiss Behavior To test if the JavaScript is working, manually trigger the dismiss with this in the console:
    document.querySelector('.alert').remove();

    If this works, but the button click still doesn't, Bootstrap might not be applying the event listener correctly.

    Let me know if this helps! It sounds like the Bootstrap JavaScript might not be loading properly, which is why the dismiss functionality isn't working. The data-bs-dismiss="alert" attribute relies on Bootstrap’s JavaScript to handle the click event and remove the alert.

    Here are a few things to check:

    1. Ensure Bootstrap JS is Loaded
      Verify that the Bootstrap JavaScript file is correctly linked in your HTML. Add this to the bottom of your page, just before the closing </body> tag:
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    Check for Errors in Console
    Open the developer console (F12 or right-click > Inspect > Console) and see if there are any JavaScript errors. If Bootstrap is not loading, you'll likely see an error about data-bs-dismiss not being recognized.

    Ensure Bootstrap CSS is Included
    If you haven't already, add the Bootstrap CSS to the <head> section:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    1. Confirm Dismiss Behavior
      To test if the JavaScript is working, manually trigger the dismiss with this in the console:
    document.querySelector('.alert').remove();

    If this works, but the button click still doesn't, Bootstrap might not be applying the event listener correctly.

    Let me know if this helps!

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.