increasing the size of the input field on the lower row of the form

I have a form with two rows of text boxes. The first row contains three text boxes, while the second row should only have one text box that spans 100% of the width. Here is the current code:

  <div class="row">
    <div class="col-md-4">
        <label>First Name</label><br />
    <asp:TextBox runat="server" ID="fName" CssClass="textboxsizeLarge borderText" ></asp:TextBox></div>
    <div class="col-md-4">
             <label>Middle Name</label><br />
    <asp:TextBox runat="server" ID="MdName" CssClass="textBoxSizMd borderText" ></asp:TextBox></div>
    <div class="col-md-4">
        <label>Last Name</label><br />
    <asp:TextBox runat="server" ID="lname"  CssClass="textboxsizeLarge borderText" ></asp:TextBox></div>
</div>
<div class="row">
    <div class="col-md-12">
    <label>Address1</label><br />
    <asp:TextBox runat="server" ID="address1" CssClass="borderText textboxsizebig" ></asp:TextBox></div>
</div>

The issue I am facing is that the address1 text box is only expanding to 40% of the screen width instead of the intended 80%. I am utilizing Bootstrap for this layout.

Here is an example screenshot showing the display of the address1 text box:

https://i.sstatic.net/7MjsM.png

I want the address1 text box to align with the beginning of the Last Name text box.

Below is the CSS styling I am using:

.textboxsizeLarge{

    width:60%;
}

.textBoxSizMd {
    width: 30%;
}
.textboxsizebig {
    width: 100%;
}

.borderText {
    border: 1px solid black;
    padding: 1px;
}

In case Bootstrap is not functioning correctly, here is how I have included it in my site.master page. If any additional modifications are needed in the site.master page, please advise. Below is a snippet and the complete code follows:

<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>

                <asp:ScriptReference Name="bootstrap" path="~/Scripts/bootstrap.js" />

                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

Here is the full site.master page content:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="IdentityCheckApp.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" media="all"   href="Content/Site.css" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" path="~/Scripts/bootstrap.js" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>


                    <div><h1 class="h1top"></h1></div>
                    <div class="d-flex align-items-top px-5 mb-3">
                        <img src="images/azx.png" class="logo mr-3" />
                        <h4>test company</h4>
                        </div>
                        <div><h1 class="h1bottom"></h1></div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            
        </div>

    </form>
</body>
</html>

Your assistance on solving this issue would be greatly appreciated.

htmlcssasp.netbootstrap-4flexbox

Answer №1

If you're utilizing bootstrap, simply ensure that your desired column is set to col-*-12. Bootstrap's grid system consists of 12 columns, so if you want your element to occupy the entire row, then make sure it takes up all 12 columns.

Here's an example:

<div class="row">
    <div class="col-md-12">
    <label>Address1</label><br />
    <asp:TextBox runat="server" ID="address1" CssClass="borderText textboxsizebig col-md-12" ></asp:TextBox></div>
</div>

UPDATE

To replicate your issue, I used your existing code for better clarification and utilized HTML attributes instead of ASP attributes (apologies for that).

To resolve the problem, you need to include two instances of col-md-12 in your elements - one for the wrapper div and another for the input. The first sets the width of the entire div to fit the row, while the second adjusts the input to occupy the remaining space (for optimal display, view it in full-screen mode).

.row {
  margin: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4">
    <label>First Name</label><br />
    <input runat="server" ID="fName" class="textboxsizeLarge borderText" />
  </div>
  <div class="col-md-4">
    <label>Middle Name</label><br />
    <input runat="server" ID="MdName" class="textBoxSizMd borderText" />
  </div>
  <div class="col-md-4">
    <label>Last Name</label><br />
    <input runat="server" ID="lname" class="textboxsizeLarge borderText" />
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <label>Address1</label><br />
    <input runat="server" ID="address1" class="borderText textboxsizebig col-md-12" />
  </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

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Aligning the wp_nav_menu vertically within the site-header

Is there a way to vertically center the WordPress function wp_nav_menu in my site header? Although I followed the learnWebCode tutorial for the menu, I am struggling to implement it successfully. Is there anyone who can provide guidance or a solution? ...

csswordpress

Manipulating the content of h1 tag using Jquery when selecting from a dropdown menu

As I was exploring this Fiddle I stumbled upon, http://jsfiddle.net/JBjXN/ I've been working on a functionality where selecting an option from HTML <h1>Select a Show</h1> <select class="radio-line" id="radio-manager&quo ...

javascriptjqueryhtml

Bottom-aligning text in Tailwind CSS

Creating two <p> tags to store text: <p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p> <p v-else class="text-red-500 text-lg font-bold">{{my_value}}%< ...

htmlcssvue.jstailwind-css

HTML5's drag-and-drop feature, including nested targets, allows for intuitive and interactive user

I'm currently implementing HTML5 drag and drop functionality. I have a parent div that is droppable, and inside it, there is another child div that is also droppable. <div id="target-parent"> <div id="target-child"></div> </d ...

javascripthtmlnesteddrag-and-drop

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

htmlvue.jsaxios

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work. The CSS rule text-align ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...

animationcsswebkitcss-animations

Bind data to a gridview located on a separate webpage

In webform1.aspx, I have a gridView (gridView1) along with a button that triggers a popup window. This popup window directs users to webform2.aspx where they can import an excel file to retrieve data. The intention is to display this data on the gridView o ...

c#asp.netgridview

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

Tips for identifying a webpage and making class modifications based on it

I am working on a customized bar with 4 distinct parts. Each part corresponds to a different page on the website. I want each part of the bar to change color based on which page the user is currently browsing. For example, if the user is on page A, I want ...

javascriptjqueryhtmlcss

The image displayed in the Telerik RadGrid EditCommandColumn does not correspond with the specified EditImageUrl

I'm experiencing an issue with a detail table in a Telerik Radgrid where the images for Edit, Update, and Cancel operations are not displaying correctly. Instead, generic images are being shown, despite the fact that the paths to the images are correc ...

asp.netteleriktelerik-grid

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

jqueryhtmlcss

exploring numerous boxes in an engaging and educational tutorial

Explaining this in the title was a bit tricky, but what I want to create is an interactive tutorial. In this tutorial, the user will click on an area or product they want to clean or use for cleaning. After clicking, another box with relevant information w ...

javascriptjqueryhtmlinteractivebox

Assistance with Collision Detection in HTML5 Canvas using JavaScript

Attempting to create a platformer game using HTML5 and the canvas feature. I managed to implement collision detection with rectangles, but encountered issues when adding multiple rectangles. I have a function that adds new objects to an array with attribut ...

javascripthtmlcanvascollision-detection

Obtain the value or values of radio buttons based on certain conditions

Recently, I have been delving into .JS and grappling with pre-existing code. One of the challenges I face involves extracting data from radio buttons after a particular selection is made. The gist of it is related to transportation requirements. Upon indi ...

javascriptjqueryasp.net

Displaying two dropdown menus with just a single coding component

Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.co ...

htmlcssbootstrap-4bootstrap-modal

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

javascripthtml