The issue with the Bootstrap modal backdrop failing to close

After setting up a Bootstrap modal, I encountered an issue where the modal wouldn't close upon clicking submit. The problem seems to be arising from having an edit form outside of the modal.

<EditForm Model="newCategoryType" OnValidSubmit="HandleCreate">
  <DataAnnotationsValidator />
  <ValidationSummary />
  <div class="modal fade bd-example-modal-lg" id="AddCategoryType" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add category Type</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12">
              <div class="card">
                <div class="card-body">
                  <div class="form-group">
                    <label for="CategoryTypeName">Category Type Name:</label>
                    <InputText id="CategoryTypeName" class="form-control" @bind-Value="newCategoryType.CategoryTypeName" />
                  </div>
                  <div class="form-group">
                    <label for="CategoryTypeName">Category Type Description:</label>
                    <InputText id="CategoryTypeDescription" class="form-control" @bind-Value="newCategoryType.CategoryTypeDescription" />
                  </div>
                  <div class="form-group">
                    <label for="CategoryType">Category Type Details:</label>
                    <InputText id="CategoryTypeDetails" class="form-control" @bind-Value="newCategoryType.CategoryTypeDetails" />
                  </div>
                  <div class="form-group">
                    <label for="IsActive">IsActive:</label>
                    <InputCheckbox id="IsActive" class="form-control" @bind-Value="newCategoryType.IsActive" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button id="submit" type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</EditForm>

My main concern is getting the modal to close upon clicking submit. Currently, it closes when I click the close button, but not when I submit the form. This issue is causing the backdrop to remain gray and unresponsive. It's worth noting that this setup follows the Blazor format and utilizes a Bootstrap modal design.

Answer №1

Remember to manually close the modal once you've submitted your information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for optimizing subquery performance in linq where conditions

I'm facing a challenge while trying to write a subquery in LINQ with a where condition. However, when I check the SQL syntax in the SQL Server Profiler, my query appears to be complicated, long, and eventually leads to a timeout error on the server. ...

Ways to solely add effect to background image without affecting text

I'm on a quest to find a way to create a CSS effect that only applies to an image, excluding the letters and buttons. I need to establish a rule in my CSS without altering the current structure. The issue arises when my code ends up applying the effec ...

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

Having trouble getting the drop down menu to function properly using HTML and CSS

I attempted to implement a drop-down menu using the following codes. However, I am facing some issues as clicking on the drop-down menu does not open the sub-menus as expected. Is there a way for me to resolve this problem? <div id="control-panel& ...

"Dimensions not specified for ngx-gallery - width and height parameters are needed

I have a question about customizing the height of ngx-gallery from this link: https://github.com/MurhafSousli/ngx-gallery. Currently, it has a fixed height value of 500px and adjusting the parent div height doesn't seem to have any effect. I was hopi ...

Automated bot for gathering dynamic links without the need for a web browser

Is there a more efficient method for handling ajax requests and receiving the results, rather than relying on traditional methods like using automated web browsers or external libraries? Is there any innovative algorithms that can streamline this process ...

Does Somebody Possess a Fine Floating Tag?

Some time ago, I came across this floating label that I have been searching for ever since. I experimented with a few that appeared promising and initially worked well, but they ended up presenting their own issues. Some required the mandatory attribute f ...

Adapt to every screen size for optimal fit

Can someone please help me with adjusting the height of each section to fit every screen size? I attempted using Height: 100% but it was not successful. This is for a parallax website, and I specifically need assistance with the homepage layout shown below ...

Unable to convert the current JSON object (for example: {"title":"text"}) into a Collection of Lists

Converting JSON to a list of Models in C# is causing an exception for me. In my JSON response, I am receiving GUID type data and I am unsure how to convert it into model binding. client = new FireSharp.FirebaseClient(config); FirebaseResponse response ...

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

Enhance Your Forms with Bootstrap 4 Input Extension

I've been struggling to create a form with Bootstrap 4, specifically setting the value in an input text client-side for a modal form. No matter what I try, it just doesn't seem to work... Here is the form: $('#contact-modal').on(& ...

Automatically open Bootstrap dropdown upon loading the page

Displayed below is my dropdown menu styled using bootstrap: <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a> <ul class="dropd ...

Event arguments for referencing DataGridView dynamically within a cell

Currently, I am working on a forms app that includes 4 DataGrids. I have implemented a rowleave event that triggers when a cell is changed in order to change the backcolor until the changes are saved to the database. My goal is to create a solution where a ...

Challenges encountered when creating HTML output using JasperReports

Currently, I am using Jasper Report within my application to generate reports in PDF format, which is working well. However, we now need the ability for users to view these reports in HTML format within the application without the inline CSS present in the ...

What exactly is the real meaning of immutability?

I'm curious about the definition of immutability. Does it simply mean that the values are not exposed publicly and cannot be modified by external actors? Is it possible for the values to be modified within the type itself, but not by consumers of the ...

While browsing in Firefox and moving the cursor over a sub element

While hovering over a child element in Firefox using the rule .parent:hover > .child { /*style*/ }, the child element is considered separate from the parent element and does not receive styling. For example, in Firefox when you hover over the button, on ...

Navigating through text after a specified label with XPath

Currently exploring Selenium for testing purposes, I've run into some issues. Let's say I have the following: <div class="itemize-row"> <p class="subText"> <span class="item-labe ...

Using GTK3 CSS styles on gvim

After successfully compiling and installing gvim 8.0.16 from source with gtk3 support on CentOS 7, I managed to set some style in ~/.config/gtk-3.0/gtk-css. For instance, the background of widgets above the edit window can be customized like so: @define-c ...

Error occurs when attempting to upload an image due to uninitialized ConnectionString property

Encountering an issue while attempting to insert an image into a database table from a webpage using the provided script: using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System. ...

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...