The code behind for a table using bootsrap causes elements to overlap with the div element above it

I have a division structured like this:

<div style="border:0px solid #ff0000;width:60%;margin: 0 auto;">
                <div class="div_container" style="width:100%;border:1px solid #ff0000;" id="div_dynamic_table" runat="server">
                    <!--<div class="box" style="border:1px solid #ff0000;"  runat="server">
                        <table id="id_dynamic_table" runat="server" class="table">
                            <tr>
                                <td>
                                    sample
                                </td>
                                <td>
                                    <input name="txtuname2" type="text" id="txtuname2" class="form-control" runat="server" />
                                </td>
                            </tr>
                        </table>
                    </div>-->
                </div>
            </div>

My code behind includes the following:

sbTable.Append("<table class='table'>");
            sbTable.Append("<tr><td style='white-space:nowrap'> sample Message td </ td>");
            sbTable.Append("<td> <input name='txtuname' type='text' id='txtuname' class='form-control' runat='server' /> </ td> ");
            sbTable.Append("</ tr>");
            sbTable.Append("</ table>");

            div_dynamic_table.InnerHtml = sbTable.ToString();

Upon running the code, I get a result as shown in this image.

The issue I am facing is that the input box is not contained within the div element as expected.

If I uncomment the table section in my HTML code, everything works fine and the input box is enclosed within the div.

The reason for generating the table dynamically in the code behind is to ensure flexibility and efficiency.

It's worth mentioning that Bootstrap is being utilized in this context.

Any advice or suggestions would be greatly appreciated.

Answer №1

In the back end code, I managed to find a solution by adding bootstrap.min.js:

 sbTable.Append("<table class='table'>");
            sbTable.Append("<tr><td style='white-space:nowrap'> sample Message td </ td>");
            sbTable.Append("<td> <input name='txtuname' class='form-control' type='text' id='txtuname' runat='server' /> </ td> ");
            sbTable.Append("</ tr>");
            sbTable.Append("</ table>");

            sbTable.Append("<script src = js/bootstrap.min.js ></ script>");

I hope this helps anyone who may need it. Cheers!

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

Having trouble displaying ES6 promise value in AngularJS view

Currently, I am working on a project where I am utilizing the Pinterest JavaScript SDK to retrieve some pin data. In order to achieve this, I have created a Pinterest service with a method that is invoked in my HomeController. To fetch the response and d ...

Is it possible to modify the Telerik RadButton to create a 'Large Icon Button'?

Imagine a typical RadButton looking like this: But what if we wanted a bigger button... something like this: The icon should remain unchanged. The color and text style can be discussed, but what I truly require is a 'RadBigButton' element. ...

Using a personalized class to bind as a DataSource

Consider the following class: public class Student { private string _name; private int _id; public string Name { // get and set } public int ID { // get and set } } If you want to bind this class to a FormView ...

Creating a lifelike sinusoidal flag animation or flutter effect using SVG格式

I'm attempting to create a lifelike animated svg flag that flutters in the wind. Currently, I am using this simple flag base: <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" viewBox="0 0 200 100" > <p ...

Comparing the functionality of Kendo grid with AJAX versus using server-side

I'm in search of clarity regarding the distinction between Kendo grid AJAX binding and server binding with Ajax() and Server() methods within the Kendo.Mvc.UI.Fluent.DataSourceBuilder. Can someone provide insights into this, particularly in relation t ...

What is the best method for sending JSON data to an ASP Server through AJAX?

I'm currently working on a website built with ASP.NET that requires data retrieval from CloudKit. Utilizing CloudKit JS, I successfully retrieve a record from CloudKit and aim to send the data to the server using C# in my JavaScript code. I can conver ...

The fullCalendar plugin seems to be experiencing difficulties with the bootstrap modal functionality

I encountered an issue while trying to create the event calendar. Although I can successfully add events using a JavaScript prompt box, I am facing difficulties in displaying the Bootstrap modal for adding more information to the calendar. <?php // ...

Employees are unable to operate within an HTML page embedded in a WPF project

When running scripts on an HTML page, the page tends to freeze until the script completes. This is why I am considering using workers. However, I have encountered a problem: <html> <head> </head> <body> <button onclick="startWor ...

Tips for resizing a browser window using an HTML element

I decided to add a unique feature to my website - a handle in the bottom right corner that users can grab and drag to the left to see how the design adapts to different browser window sizes (Responsive Design). To implement this, I included the following ...

What is the best way to resize images to fit in a 200 pixel square box using CSS?

I have a collection of images that all fit within a 400px × 400px box, with one dimension being 400px and the other smaller. I want to resize these images using CSS or jQuery/JavaScript if necessary, to fit into a 200px by 200px box. The goal is to have t ...

Is Joomla equipped with shortcodes akin to those found in Wordpress?

One of the great features of WordPress is the ability to use shortcodes to insert information into HTML without the need for programming knowledge in PHP or JavaScript. This simplifies tasks and increases safety. For example (this is just a hypothetical s ...

Implementing a custom ActionFilterAttribute to handle specific HTTP response codes

When it comes to throttling my ASP.NET Web Api, I make use of the following code snippet: public class Throttle : ActionFilterAttribute { public override async Task OnActionExecutingAsync(HttpActionContext context, CancellationToken cancellationToken) ...

Interacting with a WCF service using jQuery

Recently, I have been attempting to utilize a JSON file to consume a WCF service. My goal is to extract values from a basic HTML form and then pass those values into an object instantiated in the WCF using JSON. Despite my best efforts, I have not been suc ...

Delete any additional input forms

I have recently developed a function to dynamically add an input field to my form: function add_parameter(){ var d = document.getElementById("content"); d.innerHTML += "<br/><br><div class='custom_search col-md-5'><sp ...

What could be the reason for my ajax request coming back with no data?

When I make this ajax request: $.ajax({ type: "POST", url: "/admin/RoutingIndicators/Add", data: { newSecondaryRI: newRi }, success: function () { alert('hit'); document.location.reload(true); }, error: fu ...

Is there a similar feature to Bootstrap's img-responsive in Zurb Foundation?

Foundation's interchange feature allows you to replace individual images with smaller versions at various screen sizes, but I'm in need of a solution that resizes the images like Bootstrap's img-responsive class used to do. ...

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

a graphical representation of data organized in tabular form using

I am trying to develop a game where I need to generate a map using PHP. The goal is to create 100 table boxes in a specific pattern, but so far my attempts have not been successful... $field = 100; echo "<table border='3px' dir='ltr&apos ...

What is the best way to position content at the bottom of a div?

I've been attempting to align my menu div with the bottom of my logo div on the same line within my header section. <div id="header"> <div id="top-bar"> </div> <div id="clear"></div> ...

The label element in a CSS form is not displaying correctly

After clicking submit on the form located at this link: I am experiencing an issue where the validation messages are not displaying as intended. I would like them to appear next to the input elements, inline with the form. I suspect that there may be a p ...