What could be causing the data to appear when I interact with the button inside the div element?

I have created a table with a modal feature. When I click on the sign button, the modal pops up and the data from the first row of the table is reflected in the modal like a shadow. However, I am confused about closing the div element. I think I may have misplaced the div end tag. The modal itself is working fine.

Here's my code snippet:

<style>
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
</style>

<div class="row">
    <div class="panel panel-default">
        <div class="panel-body pn">                            
            <div style="overflow-x:auto;">
                <br>
                <div class="table-responsive mbn">         
                    <table class="table table-bordered mbn">
                        <div class="panel-heading">
                            <span class="panel-title">
                                <span class="fa fa-table"></span><font color="red">ex</font>
                            </span>
                        </div>
 
                        <tr>
                            <th><font color="red" size="2">Ref</font></th>
                            <th><font color="red" size="2">Da</font></th>
                            <th><font color="red" size="2">sined</font></th>
                        </tr>
    
                        <tr>
                            <td>></td>
                            <td></td>
                            <td> Details </a></td>
                            <td> EDIT </a></td>
                            <td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
                        </tr>

                    </table>
                </div>

                <div id="myModal" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">List s</h4>
                            </div>
                            
                            <div class="modal-body">
                                <div class="table-responsive mbn">         
                                    <table class="table table-bordered mbn">
                                        <tr>
                                            <th width="70"><font color="red" size="2">Sl</font></th>
                                            <th><font color="red" size="2">Name</font></th>
                                            <th width="90"><font color="red" size="2"></font></th>
                                        </tr>
                                    
                                        <tr>
                                            <td>1</td>
                                            <td>I</td>
                                            <td> <input type="checkbox" name="assign" value="Bike"></td>
                                        </tr>
                                    </table>
                                </div>
                    
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <!-- /.modal-content -->
        </div>
    </div>
</div>

Please assist me with this issue. Any help would be highly appreciated. Thank you!

Answer №1

The code had some issues with mismatched A tags and missing TD tags. Here is the cleaned up version that should work correctly: https://jsfiddle.net/DTcHh/41416/

<style>
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }
</style>

<div class="row">
    <div class="panel panel-default">
        <div class="panel-body pn">
            <div style="overflow-x:auto;">
                <br>
                <div class="table-responsive mbn">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="fa fa-table"></span><font color="red">ex</font>
                        </span>
                    </div>
                    <table class="table table-bordered mbn">
                        <tr>
                            <th><font color="red" size="2">Ref</font></th>
                            <th><font color="red" size="2">Da</font></th>
                            <th><font color="red" size="2">sined</font></th>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><a>Details </a></td>
                            <td> <a>EDIT </a></td>
                            <td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
                        </tr>
                     </table>
                </div>
                 <div id="myModal" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">List s</h4>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive mbn">
                                    <table class="table table-bordered mbn">
                                        <tr>
                                            <th width="70"><font color="red" size="2">Sl</font></th>
                                            <th><font color="red" size="2">Name</font></th>
                                            <th width="90"><font color="red" size="2"></font></th>
                                         </tr>
                                         <tr>
                                             <td>1</td>
                                             <td>I</td>
                                             <td> <input type="checkbox" name="assign" value="Bike"></td>
                                          </tr>
                                   </table>
                                     <div class="modal-footer">
                                         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                         <button type="button" class="btn btn-info">Submit</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                  </div>
              </div>
          </div>
      </div>
   </div>

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

Storing a javascript error object in mongoose: Best practices

Suppose we have an error object declared as follows: const error = new Error('Error'); I attempted to store this error object in a MongoDB field using the Object type, and even tried the Mixed type, but it ends up storing an empty Object. How c ...

Dynamically Inject HTML with Drag-and-Drop Interaction

Looking for an easy method to move html elements or content around on a webpage? The objective is to drag the element and release it onto a designated area. After dropping the element, customized html content will be added dynamically depending on ...

A step-by-step guide on serializing a model and sending it to an MVC controller through an Ajax

I need to transfer the model of my webpage to my controller for processing. Once the information has been processed, I want to update the div with the id "savedText" to show "Billing Information saved successfully." Here's what my view looks like: ...

Integrate PHP with JavaScript using Ajax to save MySQL data in JavaScript data structures

Been researching a solution to this issue for quite some time, and it seems many others are facing the same problem. However, I haven't come across a satisfactory answer yet. Here's what I'm trying to achieve: I have a basic database named ...

What is the best way to create a function that shifts a musical note up or down by one semitone?

Currently developing a guitar tuning tool and facing some hurdles. Striving to create a function that can take a musical note, an octave, and a direction (up or down), then produce a transposed note by a half step based on the traditional piano layout (i. ...

Modify the bg class when the checkbox is selected

Currently revamping my portfolio website and could use a hand with some jQuery code. Hoping to make a parent class react to a checkbox within it. Specifically looking to change the background color to #000 when the checkbox is checked. Struggling to figur ...

Creating a layout for Django comments and their accompanying replies in Django templates

I have successfully implemented a Comment model and views in my project. However, I am facing difficulty in organizing the templates to display replies corresponding to their respective comments. I would greatly appreciate it if you could guide me on how t ...

What is the best method for extracting a particular value from my dataset?

I'm interested in creating a variable that stores the IsUserSiteOwner value from the data. Can someone help me with this? Any suggestions on how I can achieve this task? ...

Having trouble using the search feature on ngx-mat-select-search for typing?

I am experiencing an issue with searching while using ngx-mat-select-search. I am able to display the options, but when I try to type in a search query, nothing appears on the screen. Can anyone provide assistance? Below is the code snippet: <div *ng ...

What is the reason my CSS formatting isn't being applied in Vue.js?

As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please ...

handsontable - personalized HTML button placed at the beginning of each row that performs an action when clicked

In my handsontable, I have successfully added a custom button in the 2nd column. When this button is clicked, I want to send the data of that particular row to the server for processing. I have written an onClick function for the button, but I am struggli ...

unable to retrieve the chosen item from the dropdown menu

How can I retrieve the value of the selected item from a dropdown menu without getting an undefined error? You can find my code on Jsfiddle. Can anyone spot what might be causing this issue? <select class="ddl_status" id="status_ddl_20" style="display ...

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...

"Manipulating DOM Elements: Create and Delete Cloned Divs with

I successfully cloned a dropdown with a unique ID on my website. Now, I'm struggling to implement a "x" button that will remove the added clones. Here is the javascript code I'm using: var counter = 1; function addInput(divName, template){ ...

Transferring data between different components in Angular 5

Presently, I am working with two distinct components within my project - a navigation component and a detail component. The navigation component contains several options or items that the user can select. Upon selection by the user, I am attempting to upda ...

What is the best method for determining the REM value of a particular type

Can you help me understand how to convert PX into REM for my typography? I came across Jonathan Snook's article on utilizing REM units, but I'm a bit confused about his suggestion of using font-size: 62.5% as a base for conversion (setting the de ...

Transforming text colors dynamically using Vue.js

Here is an Angular code snippet: <div [style.color]="'#' + prod.id.substring(0,6)"> <small>{{ prod.id }}</small> </div> Now I want to create a similar code using vue.js. ...

Having trouble styling the image within a <section> tag using CSS

I've been attempting to incorporate an image into the PUG template engine of node.js using CSS, however, the image isn't showing up on the screen even though other properties are functioning correctly. Here is the code from the .PUG file section ...

Position the caret after adding a new element in a content-editable div

I have a contenteditable div that contains various elements. My goal is to automatically create a new paragraph tag right after the element where the cursor is positioned when the user presses the enter key. Currently, I am able to insert the paragraph tag ...

Can you provide tips on customizing the appearance of an HTML standard input-type-color element?

I'm facing a challenge with styling the default <input type="color"> element using CSS. Let's assume I have the following HTML elements and corresponding CSS styling: #myColorPicker { border-radius: 50px; } <label for="myC ...