Embracing ASP Form within the framework of Bootstrap Design

I designed a form using HTML 5 within a modal window, wrapped in Bootstrap and the layout looks perfect. Now, I need to incorporate another modal window with an iframe that displays an asp form instead of the HTML 5 built form. Although everything is identically wrapped in Bootstrap, for some reason, the label next to my form control is displaying on top rather than next to it. I've been trying to figure out the issue with CSS for two days now but haven't had any luck. Any thoughts or suggestions?

HTML CODE FOR THE PERFECTLY LAID OUT FORM

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content" style="width:100%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Observation Form</h4>
            </div>
            <div class="modal-body">
                <form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
                    <fieldset>
                        <!-- Form Name -->

                        <!-- Enter Building -->

                        <div class="form-group">
                            <label class="col-md-3 control-label">Building</label>
                            <div class="col-md-8 inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                    <select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
                                </div>
                            </div>
                        </div>

IMAGE SHOWING THE PERFECT LAYOUT

https://i.sstatic.net/XRUoy.jpg

ASP CODE WRAPPED IN IFRAME DISPLAYED WITHIN MODAL

 <form id="form1" runat="server" class="well form-horizontal">
    <fieldset>
        <legend>File Upload Form</legend>
        <div class="form-group">
            <label class="col-md-3 control-label">Choose File</label>
            <div class="col-md-8 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
                </div>
            </div>
        </div>
        <asp:HiddenField ID="site" runat="server" />
        <asp:HiddenField ID="dateobserved" runat="server" />
        <asp:HiddenField ID="guid" runat="server" />
        <asp:HiddenField ID="username" runat="server" />
        <asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
    </fieldset>
</form>

IMAGE SHOWING THE INCORRECT LAYOUT

https://i.sstatic.net/bJQhj.jpg

Answer №1

It appears that adjusting the width of the iframe may solve your issue with the modal size remaining unchanged. I recommend setting the width to 100% for the iframe.

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

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functiona ...

The SaveAs function is designed to only accept absolute paths, and the given path '~/Images/FleaMarket/uploadedImages/mitali2054/5.jpg' is not absolute

Private Function UploadPic() As String Const bmpw As Integer = 300 Const bmph As Integer = 300 Dim itemID As String = MaxItemNo() Dim filePath As String = "~/Images/FleaMarket/uploadedImages/" & User.Identity.Name.ToSt ...

Error occurs when including in EF Core

I've been working on developing an application in ASP.NET Core 7, which includes a PostgreSQL database and utilizes EF Core for managing the data. Currently, I'm facing an issue when trying to retrieve a user along with their associated data. pu ...

Tips for altering the text color of the highlighted row in a Material UI table

Trying to modify the color of the row text and the background color when selected. I have managed to adjust the background color, but I am encountering difficulty changing the text color. <TableRow className={classes.tableBody} > tab ...

Chrome displays 'canceled' message after a successful download of a file (with 200 status code)

I'm encountering an issue while writing a file in ASP.NET. Even though the file is successfully processed, the network tab in Chrome's developer tools always displays a line marked "Canceled" in red. I have experimented with several approaches, ...

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

<select id="ordersSelect" class="drop-down" onchange="somemethod()"> <c:forEach items="${orders}" var="order" varStatus="orderStatus"> <option value="${order.id}"> ${order.publicId} </option> </c:forEach> </select> ...

Rendering an image on the HTML5 canvas

I really want my image to be in the perfect spot. I already have this code set up, but how can I adjust the positioning of my image? Whether it's a little to the left or more to the right, I'm talking about the exact coordinates. Where do I need ...

Do not include undesired tags when using Beautifulsoup in Python

<span> I Enjoy <span class='not needed'> slapping </span> your back </span> How can "I Enjoy your back" be displayed instead of "I Enjoy slapping your back" This is what I attempted: result = soup.find_all(&apos ...

numerous concealed forms

I have a PHP MySQL application and I am currently viewing rows of data on a detail view page. My goal is to use the jQuery form plugin for form submission. However, I am facing a dilemma regarding how to handle form creation for each individual record in c ...

Steps for triggering a modal popup using server-side code when a button is clicked

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3.aspx.cs" Inherits="KVTRANSAPORTS._3" MasterPageFile="~/Site1.Master" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="Sc ...

Reorder the text input element to precede the tags in bootstrap-tagsinput

Does anyone know a simple way to reposition the text input box above the tags in bootstrap-tagsinput? Check out this codepen for a visual representation: https://codepen.io/uebes/pen/KQEdeP Basically, I would like the tags to come after my input text box ...

Using jQuery to update elements with the same class in HTML

This morning, I stumbled upon a rather perplexing issue. Despite my attempts to find a solution on SO, all I came across were methods involving data loading into HTML or a complete page refresh. My aim is to utilize jQuery's $.ajax function to update ...

Techniques for determining if a file is empty using jQuery

Just starting out with JS. I want to validate the file input element before form submission using jQuery/JavaScript. I've researched various solutions, but nothing seems to be working for me. I'm trying to avoid displaying "/c/fakepath" as the ...

Why is inner HTML returning input/textbox instead of the value?

I need help extracting the value from an input/textbox within a table cell. Although the rest of my code is functioning correctly, I'm struggling to retrieve the value from this particular input element. I've attempted to access the value using ...

Using HTML to create an email link with a subject that includes special characters such as '&'

Is it possible to dynamically set the email subject to include an '&' sign in client-side HTML? Here is the code I am working with: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="533d3c7e3c3d361320 ...

Ways to position Bootstrap 4 navbar elements at the bottom

Struggling to adjust the alignment of the text in the navbar items using Bootstrap 4? My initial thought was to align them at the bottom of the ul and then position the ul accordingly, but I'm facing challenges with both. The objective is to have the ...

The Security Token Service in Windows Identity Foundation keeps logging out unexpectedly

Using the Windows Identity Foundation (WIF) Security Token Service (STS) to manage authentication in my application has been smooth sailing so far. However, I've encountered an issue with maintaining long-running logins using the STS. According to my ...

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

Inequality in spacing between Bootstrap columns

I am currently working on a website where the home page has columns with icons and text. The issue arises on mobile devices as the columns stack unevenly due to varying text lengths, resulting in inconsistent vertical spacing. Is there a way to ensure cons ...

I can't seem to get the Font Awesome icons to display properly. What could be the issue?

How can I get Fontawesome icons to display properly in the footer? Despite having my CSS and HTML files in the same directory, the icons remain invisible. Additionally, the page seems to be loading slower than usual. I have provided all necessary informati ...